top of page
  • 執筆者の写真T sakurako

VueでWEBアプリ(3)

更新日:2021年6月4日

2.5で書いた通り、

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


今回は

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




「レスポンシブなヘッダーメニューの作成方法」にて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.

こちらの記事曰く、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>

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



記事: Blog2_Post
bottom of page