码迷,mamicode.com
首页 > Web开发 > 详细

vue-cli3.0 使用 postcss-pxtorem px转rem

时间:2019-01-29 12:03:16      阅读:1445      评论:0      收藏:0      [点我收藏+]

标签:false   bsp   插件   black   module   require   tor   生成   klist   

1. 安装依赖包   npm install postcss-pxtorem --save-dev

2. 在vue-cli3.0中。去掉了build和config文件夹。所有的配置都放到了vue.config.js中。

module.exports = {
  productionSourceMap: false, // 生产环境是否生成 SourceMap
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require(‘postcss-pxtorem‘)({
            rootValue: 16, // 换算的基数
            selectorBlackList: [], // 忽略转换正则匹配项
            propList: [‘*‘],
          }),
        ]
      }
    }
  },
}

可能遇到的坑:

插件会转化所有的样式的px。比如引入了三方UI,也会被转化。可以使用selectorBlackList字段来过滤。
如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。

vue-cli3.0 使用 postcss-pxtorem px转rem

标签:false   bsp   插件   black   module   require   tor   生成   klist   

原文地址:https://www.cnblogs.com/gr07/p/10333147.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!