react項目中使用less並修改antd主題樣式

一、react項目中使用less

1. 安裝配置

npm i -D less less-loader

2. 查看webpack配置

npm run eject

此操作不可逆，生成新的目錄。

 

3. 修改其中的webpack.config.js文件

 

 

 二、react 16.12.0 中修改antd的主題樣式

npm i -D babel-plugin-import

2. 在package.json中找到對babel的配置，並進行如下修改

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

3. 修改config/webpack.config.js文件中getStyleLoaders的定義

  const getStyleLoaders = (cssOptions, preProcessor, newOptions) => { //加參數newOptions

並找到preProcess

if (preProcessor) {
      loaders.push(
        {
          loader: require.resolve('resolve-url-loader'),
          options: {
            sourceMap: isEnvProduction && shouldUseSourceMap,
          },
        },
        {
          loader: require.resolve(preProcessor),
          options: {
            ...newOptions,  // 在此處把newOptions加進來
            sourceMap: true,
          },
        }
      );
    }

修改之前對less-loader的配置

 　　　　　　{
              test: lessRegex,
              exclude: lessModuleRegex,
              use:  getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader',
                { javascriptEnabled: true, modifyVars: { "@primary-color": "#00965e", } }  // 新增
              ),

              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader',
                { javascriptEnabled: true, modifyVars: { "@primary-color": "#00965e", } }   // 新增
              ),
            },

重啟。完成！