Nuxt 3 と Vite を使用してグローバル CSS を効率的に追加する

Question

グローバル Sass がプロジェクトに含まれていますが、それをプロジェクトに追加する効率的な方法が見つかりません。

プロジェクトに CSS を追加するには 2 つの一般的な方法があるようです。

vite: {
    プラグイン: [svgLoader()]、
    css: {
        プリプロセッサオプション: {
            scss: {
                追加データ: `
                  @import "~/assets/styles/main.scss";
          `、

            }、
        }、
    },

vite を使用すると機能するようですが、使用するすべてのコンポーネントにそれ自体が挿入されるようです。そのため、プロジェクトをビルドすると、CSS が複数回繰り返され、一部のファイルは最大 300 秒レートになることがわかります。この問題は vites 側で見つかりました https://github.com/vitejs/vite/issues/4448

css: ["@/assets/styles/main.scss"],

上記のオプションはすべてのコンポーネントに対してこれを行うわけではないようですが、.vue ファイル内の通常のスコープの Sass は、この方法でコンパイルするときに Sass 変数とミックスインを選択しません

Answer 1

すべてのページに追加するには、AdditionalData を使用します。このプロジェクトは mixns と vars でのみ動作し、ビルド時に永続的な CSS に変換されません。

基本的には、AdditionalData のミックスインで vars を使用し、次に css で global.scss

を使用します。