Vue 项目组件中 style 使用 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 时候没有限制版本号,导致安装的版本过高
解决方案:
- 卸载已安装的 less-loader
npm uninstall less-loader
- 重新安装低版本的 less-loader
npm install less-loader@5.0.0 --save