在vue项目中使用sass语法问题


Posted in Javascript onJuly 18, 2019

Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。在开发最初版本之后,Weizenbaum和Chris Eppstein继续通过SassScript来继续扩充Sass的功能。SassScript是一个在Sass文件中使用的小型脚本语言。

使用sass可以使我们的样式代码变的更简洁,更具有易读性

首先,我们创建完vue项目之后

尝试在项目中使用sass语法

在vue项目中使用sass语法问题

运行后发现果不其然报错了

在vue项目中使用sass语法问题

在使用scss之前,我们首先需要安装相关的插件

npm install sass --save-dev
npm install node-sass --save-dev
npm install sass-loader --save-dev

在这里为了安装的速度更快,我使用了淘宝镜像cnpm

在vue项目中使用sass语法问题

在vue项目中使用sass语法问题

在build目录找到webpack.base.conf.js文件

在该文件module.export中的module.rules加入解释scss文件的loader

在vue项目中使用sass语法问题

{
 test: /\.scss$/,
 loader: 'sass-loader!style-loader!css-loader'
}

至此,运行项目

我们可以发现sass语法已经可以被编译了

总结

以上所述是小编给大家介绍的在vue项目中使用sass语法问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 #Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 #Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 #Javascript
jquery实现下载图片功能
Jul 18 #jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
使用react context 实现vue插槽slot功能
Jul 18 #Javascript
jquery图片预览插件实现方法详解
Jul 18 #jQuery
You might like
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
Python 多进程和数据传递的理解
2017/10/09 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
浅谈Python协程
2020/06/17 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
公司募捐倡议书
2014/05/14 职场文书
投标诚信承诺书
2014/05/26 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang