本文主要是介绍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
修改,
-
代码第 8 和 16 行,添加
postcss-loader
,它会自动去读取文件postcss.config.js
的配置; -
代码第 16 行,注意这一行必须在下一行的
stylus-loader
之前。也就是在预处理语言stylus
loader之前,否则报错。 -
同理,其它预处理语言类似,如
sass
等; -
参考 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 升级后相关插件和配置更新说明的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!