利用px2rem-loader和lib-flexible如何实现PC端大屏项目的全自动开发

大屏项目在做的时候,每次都要自己去计算rem的值很麻烦,也影响开发进度,所以无意中发现了一个好东西,利用webpack配置px2rem-loader和lib-flexible来实现px转化rem;

1. 首先安装包

npm install px2rem-loader -D
npm install lib-flexible -S

2. 安装好了我们就开始配置,参照官网的配置方法

module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'px2rem-loader',
        // options here
        options: {
          remUnit: 75,//设计图的宽度/10 比如你的设计图是1920的宽度 这里你就1920/10=192
          remPrecision: 8//换算的rem保留几位小数点
        }
      }]
    }]
  }
}
//也可以参照我的配置
{
        test: /\.less$/, //我们可以使用css预编译工具   这里我用sass举例
        use: [ //安装 npm install sass-loader node-sass css-loader vue-style-loader postcss-loader style-loader -D  反正后面也要安装 索性一股脑全安装了
          process.env.NODE_ENV ? //MiniCssExtractPlugin.loader 用来抽离css文件的 不用打包到js文件里
          'vue-style-loader' : MiniCssExtractPlugin.loader, //可以再vue模板中的