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

1.安装

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

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 options
      lessLoaderOptions: {
        lessOptions: {
          strictMath: true,
        }
      }
    }),

    (config) => {
    	// px2rem配置项
      rewirePostcss(config, {
        plugins: () => [
          px2rem({
            remUnit: 100,
            exclude: /node_modules/i, // 当这里不起作用时，可以用postcss-px2rem-exclude试试
          }),
        ],
      });

      return config;
    }
  )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

3. 重新启动

npm start
1