如何在vue中使用sass

创建一个基于 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";

<strong>千万别忘了分号</strong>
否则会报错类似的错误

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就这么简单

推荐阅读更多精彩内容

  • 创建一个基于 webpack 模板的新项目 全局安装 vue-cli $ npm install --global...
    萧玄辞阅读 1,654评论 0 0
  • 目前药品行业出现很多问题,比如伪劣药品泛滥,但是药品又关系着千千万万患者的健康与生命安全,不能出现一点差错。可有些...
    神鬼攻歼_df7d阅读 941评论 0 0
  • 秋天的颜色是渐黄的梧桐叶,秋天的气味是飘着微香的茉莉。秋天的想念是一片片的。 微微凉凉的温度打在裸露的皮肤上。...
    今日明日君阅读 169评论 0 0
  • 為何夢中不來電? 人在矽谷人欽羨. 隔著大洋難相見. 你說思念盼佳人, 為何夢中不來電? 不如趁早了斷願. 免得天...
    BarryChang阅读 213评论 0 0
  • 要说2016年最火爆的科技技术,那么就要当属VR和AR了,它们使得人们在未来能更像好莱坞电影一样生活、工作,可是,...
    VR的世界阅读 581评论 0 0