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>
これでエラーは出なくなりました。