sass怎么在vue中使用

sass怎么在vue中使用？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

創建一個基于 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: 
h2, h3 {
    ^
   Invalid CSS after "h2, h3 {": 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

看完上述內容，你們掌握sass怎么在vue中使用的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！