解决vue中使用less/sass及使用中遇到无效的问题


Posted in Javascript onOctober 24, 2020

一:使用方法

在vue官方脚手架中,即vue-lci搭建的项目中,可以轻易的使用less/sass。

先使用npm下载依赖,命令行为'npm install less less-loader ?save',再在webpack.base.conf.js中添加rules对象:

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

然后在style标签中添加lang=”less”即可,或者直接引用less文件,或者import一个less文件(如同import一个css文件)。

<style lang="less">
//import './less/a.less'
</style>

<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >

sass可用相同的方法。

二:发现有的时候设置后无效

后面发现有的时候设置后无效,会报错。主要是由于webpack版本问题,要注意版本信息。

less和less-loader仍然需要安装。

通过检查,我们可以看到webpack.base.conf.js已经引入了vue-loader.conf.js文件:

解决vue中使用less/sass及使用中遇到无效的问题

在这个文件中,我们可以看到它引入了utils.js文件:

解决vue中使用less/sass及使用中遇到无效的问题

在utils.js文件中,我们可以看到已经配置好解析less的文件了:

解决vue中使用less/sass及使用中遇到无效的问题

最后,直接webpack.base.conf.js里less解析使用vue-loader即可:

{
    test: /\.less$/,
    loader: ["vue-loader", "css-loader", "less-loader"]
   },
 {
  test: /\.less$/,
  loader: 'vue-loader',
  options: vueLoaderConfig
 }

补充知识:vue中使用less出现的问题(style中使用less设置 scoped 遇到的坑)

最近在学vue的时候碰到的,在项目中的使用了 <style lang="less" scoped>,可以正常编译却不能启动成功,具体报错信息如下:

解决vue中使用less/sass及使用中遇到无效的问题

首先需要安装必要的插件

sass-resources-loader,less-loader等,网上说这个出现这个错误的原因是因为less与webpack版本不一致所致。解决的方法如下。

1.修改项目根目录build中的utils.js

在utils.js中

less: generateLoaders('less')改为
less: generateLoaders('less').concat(
 {
  loader: 'sass-resources-loader',
  options: {
   resources: path.resolve(__dirname, '../src/assets/css/1.less')
  }
 }
)

这个1.less文件各位同仁就自己在对应的目录创建下就好了。

2.修改webpack.base.config.js

在该js中的modules中的rules中增加

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

3.将less-loader的版本降低

在package.js中找到less-loader,将版本号改为 ^5.0.0。

然后再执行npm install less-loader@5.0.0 --save

以上这篇解决vue中使用less/sass及使用中遇到无效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js location.replace与location.reload的区别
Sep 08 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
vue中是怎样监听数组变化的
Oct 24 #Javascript
JSON stringify方法原理及实例解析
Oct 23 #Javascript
vue中使用腾讯云Im的示例
Oct 23 #Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 #Javascript
vue使用video插件vue-video-player详解
Oct 23 #Javascript
vue-video-player视频播放器使用配置详解
Oct 23 #Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 #Javascript
You might like
php中转义mysql语句的实现代码
2011/06/24 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
smarty自定义函数用法示例
2016/05/20 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
vue渲染方式render和template的区别
2020/06/05 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
python3实现名片管理系统
2020/11/29 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
林肯就职演讲稿
2014/05/19 职场文书
银行求职自荐书
2014/06/25 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
工作推荐信模板
2015/03/25 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书