由于上一篇讲解了在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";
