[email protected] 配置 less 與 antd

[email protected]

在1.x版本中配置less見 1.x版本配置less

[email protected]

升級2.x的版本後，有兩種配置less的方式

1. react-app-rewired （一個對 create-react-app 進行自定義配置的社區解決方案）。 react-app-rewire-less 來幫助加載 less 樣式
2. 直接修改webpack配置文件

這裏以第二種方式爲例（第一種上面鏈接已經寫的很詳細了）
其實在2.x版本中默認內置了(scss/sass),這裏僅作爲配置示例

2.x 中將webpack.config.dev.js 與 webpack.config.prod.js進行了合併，只有一個webpack.config.js

配置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' // 注意第二個參數
              ),
            },

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

配置antd組件庫

安裝並配置按需導入

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

在package.json中或者.babelrc中配置按需導入的組件庫規則

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

目前爲止在App.js中按需導入antd組件一切正常

注意：如果需要修改主題默認配置的話(例如顏色)導入less文件這裏應設置爲true

坑來了！！當你設爲true時，你會發編譯失敗，頁面中antd組件也會沒有樣式了，命令行拋出如下異常：

這裏主要還是落下了less-loader的配置

// 接上文相同代碼
if (preProcessor) {
      if (preProcessor === 'less-loader') { // 爲less-loader添加配置項，啓動javascript
        loaders.push({
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
            javascriptEnabled: true // 解決上文報錯
          },
        });
      } else {
        loaders.push({
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        });
      }
    }

那麼我要配置的主題顏色呢，別急見下文

	// 接上文代碼
	if (preProcessor === "less-loader") {
    	loaders.push({
          loader: require.resolve(preProcessor),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modifyVars: { // 修稿主題顏色
              'primary-color': '#000000',
            },
            javascriptEnabled: true
          },
        });

到此配置完成，可以擼代碼了