详解如何在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搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 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使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
php验证手机号码
2015/11/11 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
javascript常用函数(2)
2015/11/05 Javascript
jquery拖拽效果完整实例(附demo源码下载)
2016/01/14 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
详解python中各种文件打开模式
2020/01/19 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
消防安全宣传标语
2014/06/07 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
男生贾里读书笔记
2015/06/30 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书