详解如何在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 相关文章推荐
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
js实现的折叠导航示例
Nov 29 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
微信小程序异步处理详解
Nov 10 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
从0搭建vue-cli4脚手架
Jun 17 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
php 魔术方法详解
2014/11/11 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
prettify 代码高亮着色器google出品
2010/12/28 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
初识Node.js
2014/09/03 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python numpy 显示图像阵列的实例
2018/07/02 Python
pytorch permute维度转换方法
2018/12/14 Python
python采集微信公众号文章
2018/12/20 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Django配置跨域并开发测试接口
2020/11/04 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
建筑投标担保书
2014/05/20 职场文书
小组名称和口号
2014/06/09 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
领导干部作风建设总结
2014/10/23 职场文书
Go语言空白表示符_的实例用法
2021/07/04 Golang