VueJs全局LESS文件加载失败，构建报错求助

我的操作步骤 #

我在Vue.js项目中尝试引入LESS，按以下步骤操作：

• 安装依赖包：

  npm install -D less less-loader

• 修改Webpack配置文件webpack.base.conf.js，在module -> rules中添加规则：

  { test: /\.less$/, use: [ "vue-style-loader", "css-loader", "less-loader" ] }
  

• 在src/main.js中导入LESS文件：

  import "../static/css/style.less";

• 我的style.less只有一行变量定义：

  @white-color: #eeeeee;

遇到的问题 #

构建项目时失败，报错信息片段如下：

// load the styles
var content = require("!!../../node_modules/css-loader/index.js?{\"minimize\":false,\"sourceMap\":false}!../../node_modules/less-loader/dist/cjs.js?{\"sourceMap\":false}!./style.less");

（完整错误信息可查看对应截图）

问题分析与解决办法 #

这个问题大概率是less-loader版本与项目Webpack版本不兼容导致的。不同版本的less-loader对Webpack的版本要求不同，比如Vue CLI 2.x配套的是Webpack 3.x，而高版本的less-loader（比如6.x及以上）只支持Webpack 4+。

给你几个可行的解决方向：

1. 安装兼容版本的less-loader
   先卸载当前的less-loader，再安装适配Webpack 3.x的版本，比如5.0.0：

   npm uninstall -D less-loader
   npm install -D less-loader@5.0.0
   

   安装完成后重新构建项目，应该就能正常运行了。

2. 检查Webpack配置是否有冲突
   看看webpack.base.conf.js中是否已经存在处理LESS或CSS的规则，重复的规则可能会导致构建报错。如果有重复，保留一份正确的规则即可。

3. 如果是Vue CLI 3+项目，简化配置
   如果你用的是Vue CLI 3及以上版本，其实不需要手动修改Webpack配置文件。只要安装好less和less-loader，直接在组件中使用<style lang="less">或者导入LESS文件就能正常工作，Vue CLI会自动处理相关配置。

内容的提问来源于stack exchange，提问作者Rohith