全局 Sass 导入和使用 - Nuxt 3 静态资产

Question

我正在尝试从目录导入全局 Sass 样式表/assets，并使用在整个组件中定义的变量和混合等内容。我nuxt.config.ts目前的样子是这样的：

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
    css: ["@/assets/styles/main.sass"],
    styleResources: {
        sass: ["@/assets/styles/main.sass"],
    },
    build: {
        extractCSS: true,
        styleResources: {
            sass: "@/assets/styles/main.sass",
            hoistUseStatements: true,
        },
    },
    // buildModules: ["@nuxtjs/style-resources"], // This throws error
    vite: {
        css: {
            loaderOptions: {
                sass: {
                    additionalData: ` @import "@/assets/styles/main.sass"; `,
                },
            },
        },
    },
});

当我现在尝试使用变量时，出现[plugin:vite:css] Undefined variable.错误。这曾经在 Nuxt 2 中工作得很好@nuxtjs/style-resources，但我不确定如何在 Nuxt 3 中工作。

但是，该样式表中的类和应用样式正在工作，只有变量、混合和映射不可访问。

有人可以帮忙吗？

Answer 1

好吧，经过一段时间的尝试，这个解决方案奏效了。

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
    css: ["@/assets/styles/main.sass"],
    vite: {
        css: {
            preprocessorOptions: {
                sass: {
                    additionalData: '@import "@/assets/styles/_variables.sass"',
                },
            },
        },
    },
});

这里，

• main.sass包含类和样式。
• _variables.sass包含 mixin、变量、映射等。

请注意_variables.sass，在文件的开头需要有一个空行以避免错误。这是我们目前面临的一个问题，希望很快就能得到解决。