前提・実現したいこと
環境: Nuxt.js, SCSS, Bootstrap, Bootstrap-Vue
NuxtとSCSSを使っている際に、Bootstrapで適用したスタイルに対してカスタマイズを行いたい。
また、グローバルで使えるSCSS用の変数ファイルを作成したり、@extendしてBootstrapの既存のクラスをvueファイルの中で使いたい。
発生している問題・エラーメッセージ
- スタイルは適用されるが、@extendができずエラーが出る
- @extendはできるが、generateした時にbootstrapが2回コンパイルされ、index.htmlの量が大幅に増える
- 変数ファイルが適用されない
など
試したこと
- グローバルスタイルシートを作って、そこにBootstrapのファイルをインポートする
- @nuxt/style-resourcesでグローバルスタイルシートを読み込む
- プリコンパイルされたCSSを読み込まずに、SCSSをコンパイルさせる(コンパイルも遅くなる)
- nuxt.config.jsにて、グローバルスタイルシートを読み込ませる
と、このようないろいろなことを試しましたが、時間がかなり経ってしまい解決できないため、皆様の知識をお借りしたいです。
皆様は、どのようにグローバルスタイルシートを読み込んでいるのでしょうか?
あなたの回答
tips
プレビュー