使用webpack+vue-cli如何将px自动转为rem

Question

使用webpack+vue-cli如何配置能将.vue文件里面的style标签下面的样式将px转为rem，意思就是我写样式照样写px而浏览器解析出来是rem或者在浏览器端根据不同手机模拟器显示不同px？

Answer 1

增加如下配置即可：

new webpack.LoaderOptionsPlugin({
    // webpack 2.0之后， 此配置不能直接写在自定义配置项中， 必须写在此处
    vue: {
        postcss: [require('postcss-pxtorem')({ rootValue: 100, propWhiteList: [] })]
    },
}),

但是写在template里的就不行了， 有些UI库， html也写了一些样式

Answer 2

use postcss-px2rem

https://github.com/songsiqi/p...

Answer 3

可以用css预编译处理，比如sass和less，也可以写一个loader来处理。

Answer 4

问下，这个问题解决了吗，怎么做的啊，我用npm安装了px2rem没有效果

Answer 5

你可以用vs code编辑器，然后搜索插件px2rem，安装好后启动可以快捷键ctrl+shift+p打开命令面板，再输入这个px2rem就可以将当前页面所有px转换为rem了。

Answer 6

可以参考这里:http://www.xiuyuan.info