解决vue中less的使用问题
1.安装less依赖:npm install less less-loader --save
2.修改webpack.base.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加
// 此种方法在控制台中标签样式显示的是style标签样式{ test: /\.less$/,loader: "style-loader!css-loader!less-loader",options: { sourceMap: true } //可以在控制台中看到当前标签样式来自于哪个less文件}
文章图片
3.在项目中使用
在vue文件中的style标签中添加lang="less"即可在标签中使用less,或者外部引入less
遇到的问题:
【解决vue中less的使用问题】
文章图片
原因:less-loader安装的版本过高
解决方案:
1.npm uninstall less-loader2.npm install less-loader@5.0.0或者直接在package.json文件中直接修改版本号 然后 npm install
文章图片
到此这篇关于vue中less的使用的文章就介绍到这了,更多相关vue less使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 热闹中的孤独
- parallels|parallels desktop 解决网络初始化失败问题
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 异地恋中,逐渐适应一个人到底意味着什么()
- vue-cli|vue-cli 3.x vue.config.js 配置
- 我眼中的佛系经纪人