用customize-cra+react-app-rewired配置px2rem

本文主要是介绍用customize-cra+react-app-rewired配置px2rem，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.安装

npm i react-app-rewire-postcss postcss-px2rem -D

2. 配置项

//config-overrides.js
const { override } = require('customize-cra');
const addLessLoader = require("customize-cra-less-loader");
const rewirePostcss = require("react-app-rewire-postcss");
const px2rem = require("postcss-px2rem");module.exports = {webpack: override(addLessLoader({// strictMath: true,// noIeCompat: true,// loader: "css-loader",// options: {//   modules: {//     localIdentName: "[name]__[local]___[hash:base64:5]",//   },//   sourceMap: true// },// css loader options cssLoaderOptions: {modules: {localIdentName: '[file]',}, },// less loader optionslessLoaderOptions: {lessOptions: {strictMath: true,}}}),(config) => {// px2rem配置项rewirePostcss(config, {plugins: () => [px2rem({remUnit: 100,exclude: /node_modules/i, // 当这里不起作用时，可以用postcss-px2rem-exclude试试}),],});return config;})
}

3. 重新启动

npm start

这篇关于用customize-cra+react-app-rewired配置px2rem的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---