react 使用postcss-pxtorem

一、安装

npm i postcss postcss-loader postcss-pxtorem

二、webpack rules配置

{test: /\.jsx?$/,exclude:/node_modules/,use:{loader:'babel-loader',options: {babelrc: false,presets: [require.resolve('@babel/preset-react'),[require.resolve('@babel/preset-env'), {modules: false}]],cacheDirectory: true}},
},
{test: /\.(png|jpe?g|gif|mp3)$/i,type: 'asset/resource'
},
{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, "css-loader","postcss-loader"],
}

三、postcss-pxtorem配置

项目根目录下创建postcss.config.js文件

module.exports = {plugins: [require('postcss-pxtorem')({rootValue:16*2,propList: ['*'],exclude: /node_modules/i})]
}