kylin框架中使用postcss-px2rem

1.kylin框架的使用不做介紹

2.頁面中

html模板頁面中已經使用clientWidth/375*100+px,已經賦值了html的fontsize隨頁面寬度而變化。

比如寬度375的屏 html的fontsize爲100px

kylin加載postcss-px2rem

cnpm i --save-dev postcss-px2rem

在根目錄下的plugin.js中

var px2rem = require('postcss-px2rem'); //打開導入
// var proxy = require('http-proxy-middleware');

exports.pluginName = '@ali/kylin-plugin-custom';
exports.default = function () {
  return {
    // 修改 webpack 配置
    webpack: function modifyWebpackConfig(webpackConfig) {

      //  如果要開啓 px2rem, cnpm i --save-dev postcss-px2rem 安裝該模塊並取消下面的註釋
        webpackConfig.vue.postcss.push(
          px2rem({
            remUnit: 100
          })
        );
      
      return webpackConfig;
    },

    // 修改 babel 配置
    babel: function modifyBabelConfig(babelConfig) {
      return babelConfig;
    }

  }
}

注意基數單位爲100，即1rem = 100px;

然後在index-view中

寫正常的px代碼運行，會自動替換爲rem

大小也會跟着html的fontsize而變化