配置前先运行css
yarn eject
安装react
yarn add less-loader
在webpack.config.js文件中新增内容webpack
const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; // less 新增两行 const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'sass-loader' ), sideEffects: true, }, { test: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'sass-loader' ), }, // less 新增两条 { test: lessRegex, exclude: sassModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'less-loader' ), sideEffects: true, }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader' ), },
运行后若是报错如下错:
安装web
yarn add less
运行后若是报Error: Cannot find module '@babel …”错误sass
更新bable到最新版本就能够了babel
yarn add -D babel-loader @babel/core @babel/preset-env webpack
主页传送门less