如何使用nuxt3和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 变量和 mixin

Answer 1

使用

additionalData

将其添加到每个页面。该项目仅适用于 mixns 和 vars，它们在构建时不会转换为永久 css。

基本上只在

additionalData

中的 mixin 中使用变量，然后在

css

中使用你的 global.scss

Answer 2

additionalData

很棒，只需记住它将被注入到每一页上，而不是整个项目的全局一次。这非常重要，因为最后可能会导致大量重复的 css。