在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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
jquery 模板的应用示例
Nov 12 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 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
自己前几天写的无限分类类
2007/02/14 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
jQuery - css() 方法示例详解
2014/01/16 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
JavaScript中实现sprintf、printf函数
2015/01/27 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
layui表格设计以及数据初始化详解
2019/10/26 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
基于python中theano库的线性回归
2018/08/31 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python实现键盘输入的实操方法
2019/07/16 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
请说出你所知道的线程同步的方法
2013/04/19 面试题
学生自我鉴定范文
2013/10/04 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2014小学年度工作总结
2014/12/20 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
解决golang在import自己的包报错的问题
2021/04/29 Golang