使用 lib-flexible 和 px2rem-loader 自動轉(zhuǎn)換

• 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

注意：經(jīng)使用發(fā)現(xiàn)，上述辦法存在與其他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標(biāo)簽中的px轉(zhuǎn)成rem，不能將script標(biāo)簽和元素style里面定義的px轉(zhuǎn)成rem

2.如果在.vue文件style中的某一行代碼不希望被轉(zhuǎn)成rem，只要在后面寫上注釋 /* no*/就可以了