壹、創建壹個基於 webpack 模板的新項目
1、全局安裝 vue-cli
$ npm install --global vue-cli
2、創建壹個基於 webpack 模板的新項目
$ vue init webpack my-project
3、安裝依賴
$ cd my-project
$ npm install
4、為了使用sass，我們需要安裝sass的依賴包
npm install --save-dev sass-loader
//sass-loader依賴於node-sass
npm install --save-dev node-sass
5、修改style標簽
打開src目錄下的components目錄中的Hello.vue文件。
然後修改 style標簽如下
<style lang="sass">
6、然後運行項目
npm run dev
7、終端顯示錯誤，如下：
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";
千萬別忘了分號，否則會報錯類似的錯誤
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就這麽簡單
作者：no_shower
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。