如何在 Nuxt 3 组件中使用全局 SASS 变量

Question

Nuxt 3 第一个候选版本即将推出，所以我正在使用 Nuxt 3 开始一个全新的项目。我已经面临一个常见的问题，我正想问如何解决它。但我自己做到了，所以我提出了一个自我回答的问题，以帮助将来可能面临同样问题的人。

如何在我的 vue 组件中使用全局 Sass（或 Scss）变量？我在其他帖子中看到我们可以使用该@nuxtjs/style-resources包，但它看起来像是 Nuxt 2 包。我认为在 Nuxt 3 中可能有更好的方法来做到这一点，而无需添加style-resources像?这样的依赖项。

我所说的“全局变量”是 SASS 变量，是指我希望能够在任何 Vue 组件中使用 SASS 变量，而不必包含 SASS 文件。

我想要的是

（鉴于我已经安装了该sass软件包）

// @/assets/style/main.sass
$grey-bg: #CCC
$light-blue: #c6d8f5

<!-- app.vue -->
<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<style lang="sass">
body
  background-color: $grey-bg
  color: $light-blue
</style>

我已经尝试过的

我尝试将我的 sass 文件包含在Nuxt 配置 CSS属性中，如下所示：

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt3"

export default defineNuxtConfig({
    css: ["@/assets/style/global.sass"]
})

它的工作方式是我的global.sass文件中的样式将应用到我的整个应用程序中。但它不起作用，如果我从 Vue 组件引用 SASS 文件中的变量，则构建会失败并出现以下错误：

Plugin: vite:css. Error: Undefined variable.

Answer 1

在Nuxt 3中，Vite将开箱即用，而在Nuxt 2中则不然。从Nuxt 3开始，我们可以默认将vite配置放在文件中nuxt.config.ts（参考文档）。

这意味着我们可以简单地在 nuxt 配置中添加一个 Vite preprocessorOptions extraData 属性：

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt3"

export default defineNuxtConfig({
    vite: {
        css: {
            preprocessorOptions: {
                sass: {
                    additionalData: '@import "@/assets/style/global.sass"',
                },
            },
        },
    },
})

我还可以将全局 SASS 拆分到不同的文件中。在任何这些文件中声明的所有变量都将在我的所有组件中可用：

• @/assets/style/global.sass
• @/assets/style/_animations.sass
• @/assets/style/_colors.sass
• @/assets/style/_fonts.sass

// global.sass
@import "animations", "colors", "fonts"

请记住，我们需要sass安装软件包才能使其正常工作。如果尚未安装，请运行以下命令之一：

yarn add -D sass
# or
npm install -D sass

Answer 2

也许这会对某人有所帮助。现在它起作用了。注意‘;’ 在“@import”之后。努克斯特咒骂了它。

export default defineNuxtConfig({
        vite: {
            css: {
                preprocessorOptions: {
                    scss: {
                        additionalData: '@import "@/assets/scss/app.scss";',
                    },
                },
            },
        },
    })