使用 Nuxt 3 和 Vite 高效添加全域 CSS

Question

我的專案中包含全域 sass，但我找不到將其添加到專案中的有效方法。

似乎有兩種流行的方法可以在專案中加入 css。

vite: {
    plugins: [svgLoader()],
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `
                  @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中的mixins中使用vars，然後在css中使用你的global.scss