如何在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就這麼簡單

做者：no_shower
連接：https://www.jianshu.com/p/67f52071657d
來源：簡書
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。