VUE 配置 px 转 rem

使用 lib-flexible 和 px2rem-loader 自动转换

• 1 安装插件

npm install lib-flexible --save
npm install px2rem-loader --save-dev

• 2 配置插件
  在入口文件 main.js 中引入 lib-flexible：

import 'lib-flexible/flexible'

• 3 在 build/utils.js 文件中配置 px2rem-loader：

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

image.png

注意：经使用发现，上述办法存在与其他ui框架冲突问题，换用postcss-px2rem-exclude 插件解决

• 1 安装postcss-px2rem-exclude
  npm i postcss-px2rem-exclude
• 2 配置插件,在.postcssrc.js文件中

//.postcssrc.js
module.exports = {
  'plugins': {
    'postcss-px2rem-exclude': {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
    }
  }
}

1.此方法只能将.vue文件style标签中的px转成rem，不能将script标签和元素style里面定义的px转成rem

2.如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /* no*/就可以了