你可以这样做:

我有一个名为utilities的文件夹，其中有一个名为_variables.scss的文件

在这个文件中，我像这样声明变量:

$black: #000;
$white: #fff;

那我就有风格了。我导入了所有其他SCSS文件，如下所示:

// Utilities
@import "utilities/variables";

// Base Rules
@import "base/normalize";
@import "base/global";

然后，在我导入的任何文件中，我都应该能够访问我已经声明的变量。

只需要确保在导入其他变量文件之前导入该变量文件。

我用vite找到了vue3的解决方案。如果你正在使用dart-sass，你可以通过使用@forward和@use来绕过sass模块的全局限制。

_master.scss

$accent: #6D87A7;           
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc... 

_global.scss

@forward '_master.scss';
// etc...

然后在vite.config.js下配置css选项为

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "./<path-to-file>/_globals.scss" as *;
        `,
      },
    },
  },
// etc...
});

正如在sass文档中提到的，当导入没有命名空间的模块时

不过，我们建议只对自己编写的样式表这样做;否则，他们可能会引入新成员，导致名称冲突!

然后，您可以在任何其他样式表或组件中使用其他@use模块，如下所示

// component file needing a function module

@use 'functions.scss';

如前所述，在新版本的SASS中不鼓励使用@import。在你的文件顶部使用@use "path to SASS partial file"代替

您需要将部分SASS文件导入(使用@use)到每个使用它的SASS文件中——而不仅仅是您的主文件。

假设我们有一个名为_variables的SASS文件。在一个叫做partials的文件夹中，我们想在header.scss中使用它。在header中。SCSS你写:

@use "partials/variables" as *

现在可以使用_variables中定义的所有变量。Scss *带$variable(没有前缀)。或者，也可以使用名称空间(如前面提到的Christian)

@use "partials/variables" as v

引用_variables中的变量。用v.$变量。

*注意，SASS编译器忽略下划线，因此不会为每个部分SASS文件生成单独的CSS文件。相反，您可以使用@use将它们全部导入到主SASS文件中。

在全局sass文件中编写一些基于颜色的类如何，这样我们就不需要关心变量在哪里了。就像下面这样:

// base.scss 
@import "./_variables.scss";

.background-color{
    background: $bg-color;
}

然后，我们可以在任何文件中使用background-color类。 我的观点是，我不需要导入变量。在任何文件中使用SCSS即可。

这个答案显示了我最终是如何使用它的，以及我遇到的额外陷阱。

我做了一个主SCSS文件。这个文件的开头必须有下划线才能被导入:

// assets/_master.scss 
$accent: #6D87A7;           
$error: #811702;

然后，在我所有其他.SCSS文件的头文件中，我导入了主文件:

// When importing the master, you leave out the underscore, and it
// will look for a file with the underscore. This prevents the SCSS
// compiler from generating a CSS file from it.
@import "assets/master";

// Then do the rest of my CSS afterwards:
.text { color: $accent; }

重要的

在你的_master中除了变量、函数声明和其他SASS特性外，不要包含任何东西。scss文件。如果您包含实际的CSS，它将在导入主文件的每个文件中复制此CSS。

你可以这样做:

我有一个名为utilities的文件夹，其中有一个名为_variables.scss的文件

在这个文件中，我像这样声明变量:

$black: #000;
$white: #fff;

那我就有风格了。我导入了所有其他SCSS文件，如下所示:

// Utilities
@import "utilities/variables";

// Base Rules
@import "base/normalize";
@import "base/global";

然后，在我导入的任何文件中，我都应该能够访问我已经声明的变量。

只需要确保在导入其他变量文件之前导入该变量文件。