3.vue项目中sass的使用

由于上一篇讲解了在vue项目中如何使用less,本篇重点讲解如何使用sass

一.安装sass:

        npm install --save-dev sass-loader

        npm install --save-dev node-sass

        (ps:node-sass在安装时容易遇到问题下载不下来,建议使用淘宝镜像安装,参考我的另一篇文章"安装node-sass的正确姿势"具体可以参考https://github.com/lmk123/blog/issues/28这篇文章)

二.  sass 在使用的时候在style标签里是加lang="sass"时会报错,提示不能嵌套,如下:

报错是因为sass语法不使用大括号和分号,而且不能嵌套,只能使用缩进语法,

例如:#sidebar

              width: 30%

              background-color: #ccc

如果不习惯可以把script标签里的lang="sass" 改成 lang="scss"就能正常嵌套和使用大括号了,因为scss是sass的拓展,语法是使用大括号和分号;

三.引用scss/sass文件:

@import"./common/scss/mixin";