最近在使用antd-mobile开发新项目,使用了它提供的高清方案。按照其设计规范,开发过程中使用px
为css单位,build根据1rem=100px
(dpr=2)换算,所以用到了postcss-pxtorem。
以下是项目中webpack.config.js的主要配置:
然后出现了个“诡异”的问题,正常的.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 aftercss-loader
andstyle-loader
, but before other preprocessor loaders like e.gsass|less|stylus-loader
, if you use any.
就是postcss
要放到sass-loader
之前执行,所以改成下面问题就解决了: