React 项目暴露webpack配置文件按需加载antd+less+自定义主题

React项目是使用yarn eject暴露配置文件，需要按需加载antd组件样式，并且使用.less文件。需要在配置文件中设置。

运行yarn add less less-loader

• 添加less和less-loader
• 需要把less的版本降低到2.7.3版本，否则在运行项目中可能会报错
  • yarn add less@2.7.3降低版本号
• 在webpack.config.js文件中进行配置

/*
安装sass 的配置复制一份修改成less配置
*/
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;


=============================================================================
{
              test: sassModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'sass-loader'
              ),
            },
/*
	复制sass的配置   修改成less
*/

            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              // 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, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader'
              ),
            },

安装babel-plugin-import

在package.json文件中找到babel，在presets下方写上plugins的配置

"babel": {
   "presets": [
     "react-app"
   ],
   "plugins": [
     [
       "import",
       {
         "libraryName": "antd",
         "style": true
       }
     ]
   ]
 }

自定义主题

在webpack.config,js中搜索preProcessor 找到下面的位置并修改

   if (preProcessor) {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: true,
            javascriptEnabled: true,	//新添加
            modifyVars: { '@primary-color': '#1DA57A' }, // 自定义主题
          },
        }
      );
    }
    return loaders;

这样不需要再引用antd中的css样式，添加antd的组件，运行项目就能看到效果