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