Vue - 项目中使用 less

一. 安装使用 less

1. 安装 less 和 less-loader

(1) 安装 less
npm install less --save

(2) 安装 less-loader

限制 less-loader 版本号，防止 less-loader 安装的版本过高

npm install less-loader@5.0.0 --save

2. 配置 webpack.base.conf.js 文件

在 build 文件夹目录下 webpack.base.conf.js 文件中，找到 rules 添加以下代码

{
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader",
},

3. 组件中使用 less

style 标签中 加上 lang="less"

二. 安装使用less，发生报错

这是因为 安装 less-loader 时候没有限制版本号，导致安装的版本过高

解决方案:

1. 卸载已安装的 less-loader
   npm uninstall less-loader
2. 重新安装低版本的 less-loader
   npm install less-loader@5.0.0 --save