postcss 将px转换成rem vuecli3+vant+vue+postcss

时间 2019-11-09

标签 postcss 转换 rem vuecli3+vant+vue+postcss vuecli vant vue 栏目 CSS 繁體版

原文原文链接

1.安装 npm install postcss-pxtorem --savejavascript

2.找到postcss.config.js css

默认是这样
module.exports = {
  "plugins": {
    "autoprefixer": {},
  }
}

修改为这样
module.exports = {
  "plugins": {
    "autoprefixer": {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    "postcss-pxtorem": { 
      "rootValue": 37.5, 根据UI提供的375尺寸来，若是设置rootValue等于75，那么按照UI提供的750尺寸来
      "propList": ["*"]
    }
  }
}

3.重启项目便可java

若是在项目中使用了Vant UI，这样设置会致使Vant里的样式不少都改变，那咱们即想用Vant又想用postcss怎么办呢？npm

打开postcss.config.js 粘贴复制便可实现const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

module.exports = ({ file }) => {
  let rootValue
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) {
    rootValue = 16
  } else {
    rootValue = 37.5
  }
  return {
    plugins: [
      autoprefixer(),
      pxtorem({
        rootValue: rootValue,
        propList: ['*'],
        minPixelValue: 2
      })
    ]
  }
}