在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 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
vue如何截取字符串
May 06 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
element实现合并单元格通用方法
Nov 13 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和ACCESS写聊天室(八)
2006/10/09 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
javascript动态加载二
2012/08/22 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
shiro授权的实现原理
2017/09/21 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python连接sql server乱码的解决方法
2013/01/28 Python
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
明星员工获奖感言
2014/08/14 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书