Tambah CSS global dengan cekap menggunakan Nuxt 3 dan Vite

Question

Saya mempunyai sass global yang disertakan dalam projek saya, tetapi saya tidak dapat mencari cara yang cekap untuk menambahkannya pada projek saya.

Nampaknya terdapat dua cara popular untuk menambah css pada projek anda.

vite: {
    pemalam: [svgLoader()],
    css: {
        prapemprosesPilihan: {
            scss: {
                data tambahan: `
                  @import "~/assets/styles/main.scss";
          `,

            },
        },
    },

Menggunakan vite nampaknya berfungsi, tetapi ia juga nampaknya menyuntik dirinya ke dalam setiap komponen yang saya gunakan, jadi apabila saya membina projek, saya dapat melihat css saya berulang beberapa kali, beberapa fail sehingga 300 Second-rate. Isu itu ditemui di sebelah vites https://github.com/vitejs/vite/issues/4448

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

Pilihan di atas nampaknya tidak melakukan ini untuk setiap komponen, tetapi sass berskop biasa dalam fail .vue tidak mengambil pembolehubah dan campuran sass apabila menyusun dengan kaedah ini

Answer 1

Gunakan additionalData untuk menambahkannya pada setiap halaman. Projek ini hanya berfungsi dengan campuran dan vars, yang tidak ditukar kepada css kekal pada binaan.

Pada asasnya hanya gunakan vars dalam mixin dalam additionalData中的mixins中使用vars，然后在css dan kemudian gunakan global.scss anda dalam css