在vue中使用less px自动转成rem(px2rem-loader) 并配置公用less文件（不用每个vue文件都引一次）

第一步：安装less

cnpm install less less-loader --save 

接下来找到bulid目录下的webpack.base.conf.js并打开，加上这句话（其实不加也可以）

module: {
    rules: [
        ...
           {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            }
        ...
    ]
  },

第二步：安装px2rem-loader lib-flexible  sass-resources-loader

cnpm install px2rem-loader  lib-flexible  sass-resources-loader --save

在main.js里     import 'lib-flexible/flexible.js'

之后，在build文件夹下打开utils.js文件 先找到cssLoaders方法

const px2remLoader = {
     loader: 'px2rem-loader',
         options: {
             remUint: 75
        }
}

将上述代码添加到下图位置（这一步实现px自动转成rem）

然后再复制下面的代码 添加进去(这一步实现公共less文件只引入一次)

  function lessResourceLoader() {
    var loaders = [
      cssLoader,
      px2remLoader,
      'less-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            path.resolve(__dirname, '../src/assets/index.less'),
          ]
        }
      }
    ];

    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

注：path.resolve(__dirname, ‘…/src/assets/index.less’)为自己对应的文件路径，不用在main.js引入

…/src/assets/index.less   就是公共less文件，不用在每个vue文件都引入一次就可以直接使用index.less里的变量

复制上面的代码，然后将return 改写

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    // less: generateLoaders('less'),
    less: lessResourceLoader(),  // 看 在这里
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

 

最后重启（别忘了重启）

在vue组件里可以直接写成px单位

px2remLoader 会自动转成rem

 

 

 

安装lib-flexible    基于vue-cli配置手淘的lib-flexible + rem，实现移动端自适应

安装px2rem-loader    使用 webpack 的 px2rem-loader, 自动将px转换为rem

需要注意的是px2remloader的remUnit属性，填写的是设计稿宽度的十分之一，例如设计稿宽度是750，填写75；如果是375，填写的就是37.5