1. 安装
yarn add less less-loaderornpm i less less-loader
2. 打开webpack配置文件
创建项目的时候我们是看不到webpack文件的 需要暴露出来
yarn ejectornpm run eject
3. 配置less语法环境
在config文件下找到webpack.config.js文件
打开webpack.config.js找到如下图：
在下面添加如下两句代码：
const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/;
添加完上面两句代码后收索oneOf
找到配置sass的代码片段，如图：
在其下面添加如下代码：
{ test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'less-loader' ), // Don't consider CSS imports dead code even if the // containing package claims to have no side effects. // Remove this when webpack adds a warning or an error for this. // See https://github.com/webpack/webpack/issues/6571 sideEffects: true, }, // Adds support for CSS Modules, but using SASS // using the extension .module.scss or .module.sass { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader' ), },
4. 启动时报错
如果启动报下面错，说明你的less-loader版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理
解决方法：
通过 npm uninstall less-loader 命令卸载原版本的 less-loader，然后 通过 npm install less-loader@5.0.0 命令下载降级版本的 less-loader，这个问题就可以解决了
