VueでWEBアプリ(3)

2.5で書いた通り、

https://yacchi-engineer.com/?cat=32&paged=2

こちらのチュートリアルを参考に進めています。

今回は

https://yacchi-engineer.com/?p=1219#scss

こちらを進めているときにエラーが出てうまくいかない時があったので、解決までをまとめました。

「レスポンシブなヘッダーメニューの作成方法」にてApp.vueに

.v-app-bar__nav-icon {
 @include display_pc {
 display: none !important;
 }
}

↑の記述をしたところ、以下のエラーが出ました。

Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

https://qiita.com/kuroro_ru/items/d50212a1919308cc1480

こちらの記事曰く、sass-loaderのバージョンの問題らしく、確認するとバージョンが10以上だったので7.1.0まで下げました。

（npm uninstall時にEACCESエラーが出ましたが、VSCodeの再起動後npm uninstallで問題なく動きました。）

すると今度は以下のエラーが出ました。

Syntax Error:
   @include display_pc {
  ^
      Undefined mixin.
   ╷
74 │ ┌    @include display_pc {
75 │ │     display: none !important;
76 │ └   }
   ╵
  stdin 74:4  root stylesheet

common.scssに_mixin.scssの内容を書くなどいろいろやってみましたが、これはちょっと原因がわからず…結論としては

App.vue に直接 @import を書く

<style lang="scss" scoped>
@import "./styles/common/common.scss";

.v-toolbar__title {
 overflow: visible !important;
 margin-right: 50px !important;
}

.v-app-bar__nav-icon {
 @include display_pc {
 display: none !important;
  }
}

.v-tabs {
 display: none;
 
 @include display_pc {
 display: block !important;
  }
}
</style>

これでエラーは出なくなりました。