pxtorem在webpack中出现的问题

发表于

最近在使用antd-mobile开发新项目，使用了它提供的高清方案。按照其设计规范，开发过程中使用px为css单位，build根据1rem=100px(dpr=2)换算，所以用到了postcss-pxtorem。

以下是项目中webpack.config.js的主要配置：

1
2
3
4
5
6
7
8
9
loaders: [
{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader!postcss')
 }],
postcss: [
    autoprefixer({browsers: ['last 5 versions']}),
    pxtorem({rootValue: 100, propWhiteList: []})
]

然后出现了个“诡异”的问题，正常的.scss文件中的px都正常转成rem了，但是当scss文件中import了其他的scss文件，引入的文件中的px不会被转成rem。当时认为是pxtorem插件的问题，还傻傻的去pxtorem的GitHub上提了个issue。后面在postcss-loader的文档上找到了问题：

You can use it standalone or in conjunction with css-loader (recommended). Use it after css-loader and style-loader, but before other preprocessor loaders like e.g sass|less|stylus-loader, if you use any.

就是postcss要放到sass-loader之前执行，所以改成下面问题就解决了：

1
2
3
4
{
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss!sass-loader')
 }