详解如何在vue中使用sass


Posted in Javascript onJune 21, 2017

创建一个基于 webpack 模板的新项目

全局安装 vue-cli

$ npm install --global vue-cli

创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

安装依赖

$ cd my-project
$ npm install

为了使用sass,我们需要安装sass的依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

修改style标签

打开src目录下的components目录中的Hello.vue文件。

然后修改 style标签如下

<style lang="sass">

然后运行项目

npm run dev

终端显示错误,如下:

ERROR Failed to compile with 1 errors

 error in ./src/components/Hello.vue

Module build failed: 
h1, h2 {
    ^
   Invalid CSS after "h1, h2 {": expected "}", was "{"
   in /Users/fangyongle/my-blogger/src/components/Hello.vue (line 36, column 9)

错误提示:无效的css。因为sass语法不使用大括号和分号。

如果你喜欢使用不带大括号的语法,只要去掉css代码的大括号和分号,即使用缩进语法。

如果你希望使用带大括号的语法,即SCSS

那么,你只要把lang="sass"改成lang="scss"就行了。

引用sass/scss 文件

举个例子

@import "./common/scss/mixin";

千万别忘了分号

否则会报错类似的错误

Module build failed: 
 #app {
^
 Media query expression must begin with '('
 in /Users/fangyongle/elema/src/App.vue (line 35, column 1)
@ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-0bf489db!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-248 13:3-17:5 14:22-256

好了,在vue项目中使用sass就这么简单

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
Angularjs 滚动加载更多数据
Mar 17 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 #Javascript
JS图片预加载插件详解
Jun 21 #Javascript
解决Extjs下拉框不显示的问题
Jun 21 #Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 #Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 #Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 #Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 #Javascript
You might like
php垃圾代码优化操作代码
2010/08/05 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
优秀毕业生求职推荐信范文
2013/11/21 职场文书
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
秋天的图画教学反思
2014/05/01 职场文书
合作协议书格式
2014/08/19 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
自查自纠工作总结
2014/10/15 职场文书
交通事故起诉书
2015/05/19 职场文书
2016银行求职自荐信
2016/01/28 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏