create-react-app+TS+antd+less配置——less-loader 6.0之后的配置

一、创建项目
a.全局安装create-react-app

npm install create-react-app -g

b.创建自己的项目

npx create-react-app my-projectName

b1.创建支持TypeScript的react项目

npx create-react-app my-projectName --template typescript

c.暴露项目的配置。注：单向操作不可逆

npm run eject

二、安装antd

npm install -S antd

三、安装less、less-loader

npm install -S less less-loader

四、webpack中配置Less

1. 在第二步的时候我们已经打开了config中webpack的配置，打开 config 文件夹，修改 webpack.config.js
2. 搜索 cssRegex ，找到后添加两行代码

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

3.修改 getStyleLoaders 函数，添加代码

//lessOptions必须有
const getStyleLoaders = (cssOptions, lessOptions, preProcessor) => {
const loaders = [
	isEnvDevelopment && require.resolve('style-loader'),
	isEnvProduction && {
	  loader: MiniCssExtractPlugin.loader,
	  options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
	},
	{
	  loader: require.resolve('css-loader'),
	  options: cssOptions,
	},
	{
	  loader: "less-loader",
	  options: {
	    lessOptions: {
	      javascriptEnabled: true
	    }
	  }
	},
	{
	  // 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'),

3a.在 less-loader 6.0 之前 webpack 这样配置就可以了

{
  loader: "less-loader",
  options: {
    javascriptEnabled: true
  }
}

但是升级到了 6.0 就会报错

ERROR in ./node_modules/antd/dist/antd.less (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[1]!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[2]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[9].use[3]!./node_modules/antd/dist/antd.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'javascriptEnabled'. These properties are valid:
   object { lessOptions?, additionalData?, sourceMap?, webpackImporter?, implementation? }
    at validate (D:\webroot\my\react-smart-xdc\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (D:\webroot\my\react-smart-xdc\node_modules\webpack\lib\NormalModule.js:578:19)
    at Object.lessLoader (D:\webroot\my\react-smart-xdc\node_modules\less-loader\dist\index.js:19:24)
 @ ./node_modules/antd/dist/antd.less 8:6-263 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-233 83:0-233 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./src/index.tsx 9:0-29

3b.升级到 6.0 后需要修改为

{
  loader: "less-loader",
  options: {
    lessOptions: {
      javascriptEnabled: true
    }
  }
}

4. 搜索 cssRegex ，在 css 配置下添加 less 配置

{
   test: lessRegex,
   exclude: lessModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders: 1,
       sourceMap: isEnvProduction
         ? shouldUseSourceMap
         : isEnvDevelopment,
     },
     'less-loader'
   ),
   sideEffects: true,
 },
 {
   test: lessModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders: 1,
       sourceMap: isEnvProduction
         ? shouldUseSourceMap
         : isEnvDevelopment,
       modules: {
         getLocalIdent: getCSSModuleLocalIdent
       },
     },
     'less-loader'
   ),
 },

最后在index.tsx文件里加入antd的less文件就可以了

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'antd/dist/antd.less';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();