阅读 98

webpack配置postcss-pxtorem(v1)

前言

从名字上就可以勉强看出来,这个插件是依赖postcss的,单独配置它是不生效的,我在装这个插件的时候完美的踩了这个坑,通过查阅相关文档很快就安装好了。

Postcss文档

postcss-pxtorem配置文档


使用方法

  1. 安装插件
> npm install postcss-loader postcss-pxtorem
复制代码
  1. webpack.config.js的配置,这里主要是让postcss-loader生效,postcss-pxtorem因为是依赖于postcss-loader的插件所以是在postcss.config.js中配置的,而不是在这里。
module:{
    rules:[
        {
            test: /\.css$/i,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                "postcss-loader"
            ],
        },
        {
            test: /\.less$/i,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                "postcss-loader",  //因为loader的规则是链式处理,postcss-loader是处理css的,所以放在css之后,而不是less之后
                "less-loader"
            ],
        },
    ],
},
复制代码
  1. 配置postcss-pxtorem

项目根目录创建一个postcss.config.js文件(与package.json同级),默认内容如下。

module.exports = {
    plugins: [
        require('postcss-pxtorem')({
            rootValue:16,//结果为:设计稿元素尺寸/16,比如元素宽320px,最终页面会换算成 20rem
            propList: ['*'],
            exclude: /node_modules/i  //这里表示不处理node_modules文件夹下的内容
        })
    ]
}
复制代码

如下图,这样就成功了。

image.png

文章分类
前端
文章标签