webpack版本很重要
不同的版本要对应不同的版本
加不同的配置
所以要注意不同的版本和不同版本的配置
因为大部分bug,来源于此
我项目中的webpack版本
npx create-react-app antd-demo-ts --template typescript
"webpack": "4.44.2",
"webpack-dev-server": "3.11.1",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "5.1.4"
流程
第一步暴露webpack配置
npm run eject
第二步 安装 less less-loader 版本一定要注意和我一样
npm install less-loader@7.3.0 --save-dev
第三部 进入目录config/webpack.config.js
// 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$/;
大概在500行左右的位置
也就是cssModuleRegex后面
sassRegex前面的地方复制下面的代码
让后重启项目yarn start 或者 npm run start
就支持.less 和 .module.less的文件了
{
test: lessRegex,
exclude: lessModuleRegex,
use:getStyleLoaders(
{
importLoaders:2,
//moudles: true, //模块化
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
sideEffects:true,
},
{
test: lessModuleRegex,
use:getStyleLoaders(
{
importLoaders:2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
)
},
第四部
创建index.module.less文件并且导入
报红线找不到
进入react-app-env.d.ts
复制添加下面代码
declare module '*.module.less' {
const classes: { readonly [key: string]: string };
export default classes;
}