如何在我的 Nuxt 3 组件中使用全局 SASS 变量答案

【问题标题】：How to use global SASS variables in my Nuxt 3 components如何在我的 Nuxt 3 组件中使用全局 SASS 变量
【发布时间】：2022-08-16 22:17:04
【问题描述】：

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 config 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.

标签： sass nuxt.js nuxtjs3

【解决方案1】：

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

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

// 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

【讨论】：

这对我不起作用。 nuxt / vue 中非常奇怪和奇怪的 SCSS 设置。如果不增加样式块的大小，也很难使用辅助类，不能使用 @extend 等。