[email protected] 配置 less 与 antd

配置less

npm run eject

弹出webpack配置文件

npm i less less-loader -D

安装 less 以及 less-loader

在webpack中进行配置，与1.x相比较，2.x对css loader这一块做了提取，抽出了一个方法，如下

// common function to get style loaders
// 第一个参数代表配置项
// 第二个参数代表使用的loader
// 返回的loader列表就是匹配的样式文件需要加载的loader
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: Object.assign(
          {},
          shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
        ),
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      },
    ].filter(Boolean);
    
    // 以下是需要关注的重点，当有loader传入的时候做处理
    // 可以将 preProcessor 与 less-loader 做对比，判断使用了哪一个loader
    if (preProcessor) {
      loaders.push({
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        });
    }
    return loaders;
  };

定义less文件匹配规则

// style files regexes 样式匹配规则
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

// 新加less匹配项
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/

			// 在sass的配置下新增less配置
			{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'), // 注意第二个参数
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                'less-loader' // 注意第二个参数
              ),
            },

less-loader的配置

// 接上文相同代码
if (preProcessor) {
      if (preProcessor === 'less-loader') { // 为less-loader添加配置项，启动javascript
        loaders.push({
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modifyVars: { // 修稿主题颜色
              'primary-color': '#000000',
            },
            javascriptEnabled: true // 解决上文报错
          },
        });
      } else {
        loaders.push({
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        });
      }
    }

在 App.js中导入less文件一切正常

配置antd组件库

安装并配置按需导入

npm i antd -S
npm i babel-plugin-import -D

在package.json中或者.babelrc中配置按需导入的组件库规则

    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
    ]