React常见配置问题

发表于 | 分类于 | 阅读次数:

暴露webpack配置文件

create-react-app生成的项目，看不到webpack相关的配置文件，需要先暴露出来，使用如下命令即可：

1
npm run eject

配置less

安装依赖npm install less-loader less --save-dev。

修改webpack.config.dev.js与webpack.config.prod.js文件：

  1. 修改module的正则匹配规则：

    将/\.css$/ 改为 /\.(css|less)$/ 。

  2. 修改exclude：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    exclude: [
      /\.html$/,
      /\.(js|jsx)$/,
      /\.(css|less)$/,
      /\.json$/,
      /\.bmp$/,
      /\.gif$/,
      /\.jpe?g$/,
      /\.png$/,
    ],

  3. 配置less-loader

    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
    {
      test: /\.(css|less)$/,
      use: [
        require.resolve('style-loader'),
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
          },
        },
        {
          loader: require.resolve('postcss-loader'),
          options: {
            // Necessary for external CSS imports to work
            // https://github.com/facebookincubator/create-react-app/issues/2677
            ident: 'postcss',
            plugins: () => [
              require('postcss-flexbugs-fixes'),
              autoprefixer({
                browsers: [
                  '>1%',
                  'last 4 versions',
                  'Firefox ESR',
                  'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
              }),
            ],
          },
        },
        {
          // compiles Less to CSS  
          loader: require.resolve('less-loader') 
        }
      ],
    },

移动端配置px2rem

安装依赖：

1
npm install postcss-px2rem postcss-loader --save

修改webpack.config.dev.js与webpack.config.prod.js文件：

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
const px2rem = require('postcss-px2rem')

{
  test: /\.(css|less)$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
            //配置px2rem
             px2rem({remUnit: 75})
        ],
      },
    },
    {
      // compiles Less to CSS  
      loader: require.resolve('less-loader') 
    }
  ],
},