React配置less與antd定製主題

1、配置less

在配置less以前，我使用create-react-app，獲得React版本爲^16.8.6。

1. 安裝依賴並解構目錄：（能夠在命令前加sudo確保不會出現權限問題）

yarn add babel-plugin-import 或 npm install babel-plugin-import
yarn less-loader 或 npm install less-loader
yarn eject 或 npm run eject

解構後，我獲得的webpack版本爲4.28.3，config文件夾長這樣：

因而，打開webpack.config.js修改配置：
在第42行附近修改代碼爲：

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;    //新增
const lessModuleRegex = /\.module\.less$/;    //新增

在第327行附近修改代碼爲：

oneOf: [
    {
        ...//其餘配置
    }，
    ...//其餘配置
    
    //配置less-loader（新增）
    {
      test: lessRegex,
      exclude: lessModuleRegex,
      use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
    },
    {
      test: lessModuleRegex,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        },
        'less-loader'
      ),
    },
    //EndOf配置less-loader（新增）
    
    ...//其餘配置
]

2、配置antd定製主題

修改package.json：

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ],
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": true    //這裏是 true 不是 'css'
        }
      ]
    ]
  }

在webpack.config.js第110行附近修改代碼爲：

if (preProcessor) {
  let loader = {
    loader: require.resolve(preProcessor),
    options: {
      sourceMap: isEnvProduction && shouldUseSourceMap,
    }
  }
  if (preProcessor === "less-loader") {    //新增
    loader.options.modifyVars = {
      'primary-color': '#1DA57A',
      'link-color': '#1DA57A',
      'border-radius-base': '2px'
    }
    loader.options.javascriptEnabled = true
  }    //EndOf新增
  loaders.push(loader);
}

最後，看到按鈕變色就是成功啦！更多樣式修改能夠看文檔~

完~如有不足，請多指教，萬般感謝！