如何在包含之前向 Sass/SCSS 文件提供配置变量？

Question

自Angular 12 has deprecated Stylus 以来，我正在将 Stylus 库迁移到 SCSS，我处于受影响的 0.3% 中。我遇到了一些我们正在做的事情，我不确定如何转换为 SCSS——也许这是不可能的。

让我简单说明一下：我从事的几个项目都使用相同样式的负载，因此我们将这些样式放在一个样式表中，放在它自己的 NPM 包中。然后我们可以直接获取@import '@company/design/styles';，然后我们就可以在项目中使用所有常规样式、变量和mixin，或者我们可以导入@import '@company/package/styles/common';，只为变量和mixin。

问题是，我们的项目可能需要在导入库之前对其进行配置。假设库包含这个位：

// @company/package/styles/_forms.scss
input:invalid {
  background: url('/assets/input-error.svg') no-repeat center right;
}

并非每个项目都会在该确切位置拥有/assets/input-error.svg。也许我的一个项目必须使用/subfolder/static/input-error.svg。

我可以包含它，然后覆盖 input:invalid { background-image: url(...) } 以提供正确的位置，但可能有 许多 对这个特定文件的引用以及在此之上的许多其他资产需要更正。因此，我们在 Stylus 库中引入了一个默认指向 /assets/input-error.svg 的 $asset-input-error 变量，并执行了如下操作：

// @company/package/styles/_forms.scss
input:invalid {
  background: url($asset-input-error) no-repeat center right;
}

// the local project
$asset-input-error: '/subfolder/static/input-error.svg';
@import '@company/package/styles';

上面的内容经过了极大的简化，实际上并不是合法的 SCSS，但我希望它传达了我们想要做的事情：我们想要在 SCSS 中设置有效的环境变量，包括通用样式表，以及让它使用这些变量。

问题是，我不确定在 SCSS 中执行此操作的合法或惯用方法是什么。与 Stylus 不同，Stylus 的变量具有全局范围，SCSS 将拥有 @use '../config'; 和引用 config.$asset-input-error，并且从库外部，我无法更改配置以将该资产指向不同的位置。我确定 SCSS 有一种方法可以让我做到这一点，但我不确定它是什么。我是否将整个库转换为一个巨大的 mixin，我将可选配置传递给它？我对全局变量做些什么吗？还有什么？

如何向我的 SCSS 样式表提供变量，以将其配置为将其包含在项目中的一部分？

这里的最终目标只是能够对库说以下内容：“要引用的资产在这里”（非常重要）或“错误颜色是 this 特别是项目”（不太重要）。

Answer 1

使用@import

您可以使用在@import 之前声明的全局变量，如您所述。

SCSS Documentation for this method

@company/package/styles/_forms.scss

$asset-input-error: '/subfolder/static/input-error.svg' !default;

input:invalid {
  background: url($asset-input-error) no-repeat center right;
}

@company/package/styles/styles.scss

@import 'forms';

local.scss

$asset-input-error: '/different/path/input-error.svg';
@import '@company/package/styles';

CodeSandbox Demo

使用@use [...] with

如果您希望图书馆面向未来，您也可以搭乘 @use 火车。

SCSS Documentation for this method

SCSS Documentation for using mixins

SCSS Documentation for configuring forwards

@company/package/styles/_forms.scss

$asset-input-error: '/subfolder/static/input-error.svg' !default;

input:invalid {
  background: url($asset-input-error) no-repeat center right;
}

@company/package/styles/styles.scss

@forward 'forms';

local.scss

@use 'styles' with (
  $asset-input-error: '/different/path/input-error.svg'
);

遗憾的是 CodeSandbox 和 StackBlitz 不支持 dart-sass，所以我没有对此进行现场演示，但我在 npm 的最新版本的 sass 上对其进行了测试。