使用 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