详解如何在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 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
js实现简单的随机点名器
Sep 17 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
JavaScript实现弹出窗口效果
Dec 09 Javascript
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
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
python里大整数相乘相关技巧指南
2014/09/12 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
工地安全检查制度
2014/02/04 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
无偿献血倡议书
2014/04/14 职场文书
报到证办理个人委托书
2014/10/06 职场文书
公务员检讨书
2014/11/01 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
MySQL存储过程及语法详解
2022/08/05 MySQL