vue-cli3.0引入postcss-pxtorem和lib-

2019-09-27 本文已影响0人 MissWang1

postcss-pxtorem配合lib-flexible，非常方便，vue-cli3.0后，项目配置被大大精简了。

安装 flexible和 postcss-px2rem（命令行安装）

npm install lib-flexible --save
npm install postcss-pxtorem --save-dev
或者：
npm install postcss-px2rem --save-dev

postcss-pxtorem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据<html>标签的font-size值来计算出结果，1rem=html标签的font-size值。

引入lib-flexible

在项目入口文件main.js 中引入lib-flexible

import 'lib-flexible'

配置postcss-pxtorem

1.vue.config.js中配置

放在vue-cli3 项目中vue.config.js中（vue-cli3默认情况下没有vue.config.js，需要手动在项目根目录创建）
//////////////////待补充

2.postcss-pxtorem 在postcss.config.js中配置

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,//
      propList: ['*']// 设置哪些属性可以从px变为rem。“！”表示不匹配，“ !font* ”表示不匹配字体相关属性
    }
  }
}

或者postcss-px2rem

module.exports = {
  css: {
      loaderOptions: {
        css: {},
        postcss: {
          plugins: [
            require('postcss-px2rem')({
              remUnit: 75
            })
          ]
        }
      }
  }
}

配置完成后，重启一下项目。