react配置css相关

1. install normalize:

yarn add normalize.css -D

(1). 引入src/index.js或src/index.tsx:

import "normalize.css";

2. install sass:

yarn add [email protected] -D

3. 配置less:

(1). 安装less相关依赖:

yarn add [email protected] [email protected] -D

(2). 修改config/webpack.config.js文件:

// 添加less配置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

const getStyleLoaders = (cssOptions, preProcessor) => {
  const loaders = [
    ......
    {
      loader: require.resolve('postcss-loader'),
      ......
    },
    // 添加less配置
    {
      loader: require.resolve('less-loader'), 
      options: cssOptions,
    },
  ].filter(Boolean);
  ......
};

// 添加less解析规则
module: {
  rules: [
    ......
    {
      oneOf: [
        {
          test: sassModuleRegex,
          ......
        },
        // 添加less解析规则 start
        {
          test: lessRegex,
          exclude: lessModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 2,
              sourceMap: isEnvProduction && shouldUseSourceMap,
            },
            'less-loader'
          ),
          sideEffects: true,
        },
        {
          test: lessModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 2,
              sourceMap: isEnvProduction && shouldUseSourceMap,
              modules: {
                getLocalIdent: getCSSModuleLocalIdent,
              },
            },
            'less-loader'
          ),
        },
        // 添加less解析规则 end
        {
          loader: require.resolve('file-loader'),
          ......
        },
      ],
    },
  ],
}