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

Question

我正在尝试从 /assets 目录导入一个全局 Sass 样式表，并在整个组件中使用诸如变量和混合定义之类的东西。我的 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. 错误。这曾经在 @nuxtjs/style-resources 的 Nuxt 2 中工作得很好，但我不确定如何在 Nuxt 3 中工作。

但是，类和该样式表中应用的样式都可以使用，只有变量、mixin 和映射不可访问。

有人可以帮忙吗？

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 包含混合、变量、映射等

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

Answer 2

我想我需要更多声望才能发表评论，但这对其他人有用吗？我收到一条错误消息：

[plugin:vite:css] expected newline.
  ╷
1 │ @import "@/assets/styles/_variables.sass"$foo: green
  │                                          ^
  ╵
  assets/styles/main.sass 1:42  root stylesheet

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

Global Sass Import & Usage - Nuxt 3 Static Assets

vue.js

nuxt.js

vuejs3

vite

nuxtjs3