再：【Vue.js】グローバルにSCSSを読み込むと、コンポーネントの数だけ繰り返し呼び出されてしまいます

Question

vue.config.jsに、以下の記述をすることで、scssファイルを
グローバルに読み込んでいるのですが、

chromeの開発者ツールでソースを見てみると、
style.scssがおそらくコンポーネントの数分だけ何度も繰り返し呼び出されてしまい
スタイル自体は問題なく当たっているのですが、無駄に重複してしまっているので解決したいです。

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: "@import '@/assets/scss/style.scss';",
      },
    },
  },
};

重複の例

例えば、style.scssにhoge { margin-top: 0;} を設定しているとして、
開発者ツールを見たときに、

<style> hoge { margin-top: 0;} </style> <style> hoge { margin-top: 0;} </style> <style> hoge { margin-top: 0;} </style>

というような感じになります。

改めて質問

・style.scssを一回だけ呼び出すようにするにはどういうアプローチがあるでしょうか？

補足

・main.jsで、importしたりする方法も試したが、
カラー変数を使用するとエラーになる（変数未定義エラー）
・style.scssは、分割されたscss複数をimportしているだけのファイル

よろしくお願いします。

Comments

[kei344]

https://teratail.com/questions/251604 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、こちらの質問を削除されるよう運営に連絡されることをお勧めします。 https://teratail.com/help#delete-question https://teratail.com/contact/input

[decteckaaaaaaaa]

コメントありがとうございます。以前の投稿の方を削除リクエスト済みです。