最近开始着手Vue框架,被各种报错蹂躏,其中有一个就是sass语法,<style>标签中添加<style lang="scss">,发现报错,在网上找了一些解决办法也比较乱,下面是我亲测切实可行的方法,给大家做一分享!

在Chrome浏览器中的错误:


就是不能解析sass-loader 这种东西。 
所以第一步需要在项目中引入:

 1. npm install sass-loader -D
 2..npm install node-sass -D

第一个很快引入成功: 
 
但是在第二个却出了错误: 
 
但是我再用cnpm install node-sass -D 却成功了!!!(现在比较渣,也不知道是什么原因) 

这样项目就能够成功运行了: 

如果还是不行的话,可以继续下面的操作:

下面是官方Sass Loader的引入方法Sass Loade官方仓库:

npm install sass-loader node-sass webpack --save-dev

npm install style-loader css-loader --save-dev

在web pack.base.conf.js 里面加
{
test: /.scss$/,
loaders: ["style", "css", "sass"]
},

Vue项目中sass语法该怎么用?的更多相关文章

  1. vue项目中快捷语法糖

    1.Vue.js是渐进式框架,采用自底向上增量开发的设计基于MVVM思想. 2.Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. 3.Vue.js 的目标是通过尽可能简 ...

  2. scss/less语法以及在vue项目中的使用(转载)

    1.scss与less都是css的预处理器,首先我们的明白为什么要用scss与less,因为css只是一种标记语言,其中并没有函数变量之类的,所以当写复杂的样式时必然存在局限性,不灵活,而scss与l ...

  3. Vue项目中如何使用Element-UI以及如何使用sass

    Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...

  4. vue入坑教程(二)在vue项目中如何导入element以及sass

    在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...

  5. vue项目中引入Sass

    Sass作为目前成熟,稳定,强大的css扩展语言,让越来越多的前端工程师喜欢上它.下面介绍了如何在vue项目 中引入Sass. 首先在项目文件夹执行命令 npm install vue-cli -g, ...

  6. 在vue-cli建的vue项目中使用sass

    前面已使用vue-cli新建了一个vue项目,参考  使用命令行创建一个vue项目的全部命令及结果 首先看下新建项目的页面和代码,有部分修改,可忽视,如下图:     然后我们在页面添加sass的代码 ...

  7. Vue项目引入sass

    最近两天手头的事情暂时搞完了,可以抽出空来学习一下东西,之前项目都是鹏哥搭建好了,我们在直接在里面写代码,sass语法用来写样式还是比较方便常用的,今天就来试试怎么引入和配置sass 参考文章:Vue ...

  8. 如何在VUE项目中使用SCSS

    首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让c ...

  9. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

随机推荐

  1. Qt- 图形界面应用程序的运行模式

    main() 定义主窗口 ————>fd = DefineMainWindow() 创建主窗口————>win = CreateMainWindow() 创建主窗口中的元素-----> ...

  2. 2D TOOLKIT备忘录

    通过Clip名称更改动画片段 // 通过clip名称获取clip实例 tk2dSpriteAnimationClip clip = childrenAnimator.GetClipByName(&qu ...

  3. Django REST framework快速入门(官方文档翻译翻译)

    开始 我们将创建一个简单的API来允许管理员用户查看和编辑系统中的用户和组. 项目设置 创建一个新的django项目,命名为:<tutorial>,然后创建一个新的应用程序(app),命名 ...

  4. undefined 和 null

    cc.log('---log--- guomengkai :',guomengkai); guomengkai is not defined cc.log('---log--- gmk cc.sys. ...

  5. Thinkcmf对接支付宝支付和获取用户信息

    一.         登录支付宝开放平台 平台地址:https://open.alipay.com/ 二.         创建应用并申请上线 登录后,[进入我的开放平台],依次点击[开发者中心]-& ...

  6. onkeyup的死循环问题

    如果对一个控件调用的onkeyup事件,那么不能用回车来关闭alert()弹窗,因为按下回车的同时又再次触发了这个onkeyup事件,这样会造成一个死循环,不停按回车,不停的alert(), 所以应该 ...

  7. Strategic game树形DP解法(Poj1463,Uva1292)

    已经写过本题用二分图的做法,见这儿. 本题的图是一棵树,求最小点覆盖也可以用树形DP的做法. 定义状态f[0/1][u]表示以u为根的子树,u选取/不选最少需要选取多少点来覆盖. 显然 f[0][u] ...

  8. D. Lunar New Year and a Wander bfs+优先队列

    D. Lunar New Year and a Wander bfs+优先队列 题意 给出一个图,从1点开始走,每个点至少要经过一次(可以很多次),每次经过一个没有走过的点就把他加到走过点序列中,问最 ...

  9. 每天进步一点点------FIR(一)

    在数字信号处理系统中,有限脉冲响应(finite impulse response,FIR)数字滤波器是一个非常重要的基本单元.近年来,由于FPGA具有高速度.高集成度和高可靠性的特点而得到快速发展. ...

  10. STA之RC Corner再论

    Q:RC-Corner跟PVT怎么组合? A:通常的组合:   Q:通常说的ttcorner指的是啥? A:@孟时光 ttcorner是指管子在tt+RCtyp吧. Typesof corners W ...