Create React App 支持 Less Modules 的配置说明

Create-React-App 版本：v4.0.1

1. 未执行yarn eject的情形下

@craco/craco（Create React App Configuration Override - 配置扩展库）版本：v5.8.0

 

craco.config.js配置文件代码内容如下：

const CracoLess = require('craco-less');
const CracoAntDesign = require('craco-antd');
const path = require('path');

module.exports = {
  plugins: [
    // 针对Less的相关配置（如module样式）
    {
      plugin: CracoLess,
      options: {
        lessLoaderOptions: {
          lessOptions: { javascriptEnabled: true },
        },
        modifyLessRule: function() {
          return {
            test: /.module.less$/,
            exclude: /node_modules/,
            use: [
              { loader: 'style-loader' },
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    localIdentName: '[local]_[hash:base64:6]',
                  },
                },
              },
              { loader: 'less-loader' },
            ],
          };
        },
      },
    },
    // `Ant Design`相关配置
    {
      plugin: CracoAntDesign,
      options: {
        customizeThemeLessPath: path.join(
          __dirname,
          'src/antd.customize.less',
        ),
      },
    },
  ],
};

2. CRA原始工程已被eject的情形下

CRA v4.0.1版本eject后直接运行可能会报错，提示“找不到@babel/plugin-syntax-jsx” ！

这里我们手动安装一下: yarn add -D @babel/plugin-syntax-jsx

因为工程中，我们还需要用到less和less-loader，所以先安装下：

yarn add -D less less-loader

webpack.config.js文件中（v4.0.1版本的第535行之后，sass相关配置之后）增添如下代码：

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},

// lessRegex 在上部自行定义：
const lessRegex = /.less$/;

// lessModuleRegex 在上部自行定义：
const lessModuleRegex = /.module.less$/;