[React] react配置less支持，antd自定义主题配置 （更改webpack.config.js）

第一步：使用create-react-app创建项目，这里我创建的typescript项目。

create-react-app demo --template typescript

第二步：安装less less-loader

yarn add -D less less-loader

第三步： eject弹射，暴露webpack.config.js,弹射前需要先git。

git init
git remote add origin XXX
git branch XX
git add ./
git commit -m '0.0.1'
git push -f origin XX

yarn eject

 第四步：配置/config/webpack.config.js，即添加loader

// 69行左右（添加）
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

/* 544行左右（添加），注意一定要添加在
{exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/]}
这一项之前，不然会报错 */
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        mode: 'icss',
      },
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
      modules: {
        mode: 'local',
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'less-loader'
  ),
},

第五步：添加.module.less声明，编辑/src/react-app-env.d.ts

//底部（添加）
declare module '*.module.less' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

第六步：此时.less和.module.less均生效，添加antd库

yarn add antd

第七步：开始配置自定义主题

（1）创建自定义主题样式文件 customTheme.less

//customTheme.less
@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less'; // 引入官方提供的 less 样式入口文件

@primary-color: #fd0000; //更改primary常规色

(2) 修改/src/index.tsx，引入customTheme.less，添加一个Button组件试效果

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
//引入自定义主题文件
import './customTheme.less'
import { Button } from 'antd'
import reportWebVitals from './reportWebVitals'

ReactDOM.render(
  <React.StrictMode>
    <Button type="primary">点我</Button>
  </React.StrictMode>,
  document.getElementById('root')
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

（3）运行yarn start，我这里报错了

Module build failed (from ./node_modules/less-loader/dist/cjs.js):


// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

分析原因是Inline函数没用启用，两种方法，一种是降低less版本到2.7.2，第二种配置javascriptEnabled为true，即配置/config/webpack.config.js，这里我修改了getStyleLoaders函数 if(preProcessor)部分

if (preProcessor) {
  let temploader = {
      loader: require.resolve(preProcessor),
      options: {
          sourceMap: true,
      },
  }
  if (preProcessor == 'less-loader') {
      temploader.options['lessOptions'] = { javascriptEnabled: true }
  }
  loaders.push({
          loader: require.resolve('resolve-url-loader'),
          options: {
              sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
              root: paths.appSrc,
          },
      },
      temploader
  )
}

（4）重新运行后，primary按钮颜色为自定义主题色。

除了这种方式可以配置less支持以外还可以使用react-app-rewired或craco配置，相比之下不需要eject。