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$/;