全球 Sass 导入和使用 - Nuxt 3 静态资产答案

【问题标题】：Global Sass Import & Usage - Nuxt 3 Static Assets全球 Sass 导入和使用 - Nuxt 3 静态资产
【发布时间】：2022-01-01 07:00:25
【问题描述】：

我正在尝试从/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 和映射不可访问。

有人可以帮忙吗？

【问题讨论】：

根据Docs，Nuxt 会自动加载预处理器。您可能需要添加预处理器。
我在package.json 中安装了sass 和sass-loader，我也在组件中使用<style lang="sass"> 标签。由于某种原因仍然无法正常工作。
codesandbox.io/s/confident-saha-w4cpj
我不确定我是否能够正确设置，但让我们试试这个。我认为这就是我一直在努力的结构。
在app.vue中，我们可以尝试将div背景设置为$test在main.sass中定义的变量

标签： vue.js nuxt.js vuejs3 vite nuxtjs3

【解决方案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 中，您需要在文件开头有一个空行以避免错误。这是我们目前面临的一个问题，希望能尽快解决。

【讨论】：

【解决方案2】：

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

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

【讨论】：

佩里，这是一个新问题。您应该在代码中发布一个新问题，并将此帖子作为您已经尝试过的解决方案之一。
请检查我的评论。提交新问题时，您将获得更多有用的输入。
您可以在_variables.sass 文件中添加换行符。基本上只需在顶部留一个空行，它应该可以解决这个问题。