CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem：Webpack5 升级后相关插件和配置更新说明

本文主要是介绍CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem：Webpack5 升级后相关插件和配置更新说明，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

项目对应的 webpack5 版本如下：

npm i webpack@5.89.0 -D
npm i webpack-cli@5.1.4 -D

升级插件

说明一下，我更喜欢固定版本号，这样随机bug会少很多，更可控~

npm i postcss-loader@6.1.1 -D
npm i postcss-pxtorem@6.0.0 -D

配置

根目录下，新建文件 postcss.config.js ，配置如下：

module.exports = {"plugins": {"postcss-pxtorem": {rootValue: 16, // 16px = 1remunitPrecision: 5,propList: ['*'],// selectorBlackList: ['el-',],replace: true,mediaQuery: false,minPixelValue: 0}}
}

webpack.config.js 修改，

1. 代码第 8 和 16 行，添加 postcss-loader，它会自动去读取文件 postcss.config.js 的配置；

2. 代码第 16 行，注意这一行必须在下一行的 stylus-loader 之前。也就是在预处理语言 stylus loader之前，否则报错。

3. 同理，其它预处理语言类似，如 sass 等；

4. 参考 Webpack5 postcss-loader 配置；

   

module.exports = {module: {rules: [{test: /\.css$/,use: ["style-loader","css-loader",'postcss-loader']},{test: /\.styl(us)?$/,use: ['style-loader','css-loader','postcss-loader','stylus-loader']}]}
};

这篇关于CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem：Webpack5 升级后相关插件和配置更新说明的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---