antd 在webpack.config配置主题色

虽然官方提供了craco-less 来 覆盖less-loader 提供的 less 变量，但自己也想试着修复config来配置一下

首先需要运行 yarn eject 来暴露webpack的配置
其次需要安装less-loader（注意这个需要在3以下） 和 babel-plugin-import

yarn add less@^2.7.3
yarn add babel-plugin-import

然后打开webpack.config.js

一、配置babel全局引入antd.css

在对应的 test: /\.(js|mjs|jsx|ts|tsx)$/, 方法的plugins中增加

      ['import',{
        libraryName:'antd',
        style:true
      }],

修改后如下

    // Process application JS with Babel.
    // The preset includes JSX, Flow, TypeScript, and some ESnext features.
    {
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      include: paths.appSrc,
      loader: require.resolve('babel-loader'),
      options: {
        customize: require.resolve(
          'babel-preset-react-app/webpack-overrides'
        ),
        presets: [
          [
            require.resolve('babel-preset-react-app'),
            {
              runtime: hasJsxRuntime ? 'automatic' : 'classic',
            },
          ],
        ],

        plugins: [
          [
            require.resolve('babel-plugin-named-asset-import'),
            {
              loaderMap: {
                svg: {
                  ReactComponent:
                    '@svgr/webpack?-svgo,+titleProp,+ref![path]',
                },
              },
            },
          ],
          ['import',{
            libraryName:'antd',
            style:true
          }],
          isEnvDevelopment &&
            shouldUseReactRefresh &&
            require.resolve('react-refresh/babel'),
        ].filter(Boolean),
        // This is a feature of `babel-loader` for webpack (not Babel itself).
        // It enables caching results in ./node_modules/.cache/babel-loader/
        // directory for faster rebuilds.
        cacheDirectory: true,
        // See #6846 for context on why cacheCompression is disabled
        cacheCompression: false,
        compact: isEnvProduction,
      },
    },

二、增加less-loader

在

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

代码中增加less 正则变量

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

然后拷贝一份如下配置css-loader代码

    // "postcss" loader applies autoprefixer to our CSS.
    // "css" loader resolves paths in CSS and adds assets as dependencies.
    // "style" loader turns CSS into JS modules that inject <style> tags.
    // In production, we use MiniCSSExtractPlugin to extract that CSS
    // to a file, but in development "style" loader enables hot editing
    // of CSS.
    // By default we support CSS Modules with the extension .module.css
    {
      test: cssRegex,
      exclude: cssModuleRegex,
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
      }),
      // Don't consider CSS imports dead code even if the
      // containing package claims to have no side effects.
      // Remove this when webpack adds a warning or an error for this.
      // See https://github.com/webpack/webpack/issues/6571
      sideEffects: true,
    },
    // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
    // using the extension .module.css
    {
      test: cssModuleRegex,
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction
          ? shouldUseSourceMap
          : isEnvDevelopment,
        modules: {
          getLocalIdent: getCSSModuleLocalIdent,
        },
      }),
    },

修改后，然后将其追加到上面的css-loader之后即可

 // add less-loader options
  {
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders({
      importLoaders: 2,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    },
    'less-loader'),
    sideEffects: true,
  },
  // Adds support for less Modules
  // using the extension .module.less
  {
    test: lessModuleRegex,
    use: getStyleLoaders({
      importLoaders: 2,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      }
    },
    'less-loader' )
  },

三、配置lessOptions

1、修改less-loader

这个直接在less-loader后面追加如下代码

   lessOptions:{
     modifyVars: { '@primary-color': '#f9c700' },
     javascriptEnabled: true,
   }

修改后的less-loader

     // add less-loader options
     {
       test: lessRegex,
       exclude: lessModuleRegex,
       use: getStyleLoaders({
         importLoaders: 2,
         sourceMap: isEnvProduction
           ? shouldUseSourceMap
           : isEnvDevelopment,
       },
       'less-loader',
       {
         lessOptions:{
           modifyVars: { '@primary-color': '#f9c700' },
           javascriptEnabled: true,
         }
       }
       ),
       sideEffects: true,
     },

2、修改getStyleLoaders

再修改getStyleLoaders方法为其增加一个参数

  const getStyleLoaders = (cssOptions, preProcessor,params={}) => {
    if (preProcessor) {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
            root: paths.appSrc,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true,
            ...params
          },
        }
      );
    }
    return loaders;
})

最后完整的less-loader是这样的

     // add less-loader options
     {
       test: lessRegex,
       exclude: lessModuleRegex,
       use: getStyleLoaders({
         importLoaders: 2,
         sourceMap: isEnvProduction
           ? shouldUseSourceMap
           : isEnvDevelopment,
       },
       'less-loader',
       {
         lessOptions:{
           modifyVars: { '@primary-color': '#f9c700' },
           javascriptEnabled: true,
         }
       }
       ),
       sideEffects: true,
     },
     // Adds support for less Modules
     // using the extension .module.less
     {
       test: lessModuleRegex,
       use: getStyleLoaders({
         importLoaders: 2,
         sourceMap: isEnvProduction
           ? shouldUseSourceMap
           : isEnvDevelopment,
         modules: {
           getLocalIdent: getCSSModuleLocalIdent,
         }
       },
       'less-loader' )
     },

到此不出意外直接 yarn start 就可以看见效果了