2

我正在尝试从/assets目录中导入全局 Sass 样式表，并使用在整个组件中定义的变量和 mixins 之类的东西。我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 中进行这项工作。

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

有人可以帮忙吗？

4

2 回答 2

2

好的，所以这个解决方案在玩了一段时间后奏效了

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

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

于 2022-01-01T08:03:19.440 回答
0

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

[plugin:vite:css] expected newline.
  ╷
1 │ @import "@/assets/styles/_variables.sass"$foo: green
  │                                          ^
  ╵
  assets/styles/main.sass 1:42  root stylesheet
于 2022-01-06T21:00:37.810 回答