antd 在webpack.config配置主题色

末蓝、 2023-01-01 13:57 250阅读 0赞

> 虽然官方提供了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

#### 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 就可以看见效果了

[yarn eject]: https://blog.csdn.net/qq_34817440/article/details/112101485