Dart Sass：将主题变量提供给新的模块系统

如何解决Dart Sass：将主题变量提供给新的模块系统

我为已选择使用 SASS 的多租户应用程序设计样式。遵循最新版本指南，我开始使用 @use 和 @forward 构建基本样式。现在我想用客户的颜色和字体变量主题这个基础，以接收可以提供给我们应用程序的不同实例的多个样式表。

如果我要使用已弃用的 @import，我会这样做：

styles/customerA/index.scss

@import "customerA-variables";
@import "../base/index";

但是对于新规则，我找不到一种简单的方法来简单地将特定于主题的变量提供给基本样式。我尝试使用 with 关键字，但事实证明我需要在一个模块中定义变量，而我宁愿将它们封装在另一个模块中并导入它。

styles/customerA/index.scss

@use "customerA-variables" as variables;
@use "../base/index" with (
  $bgColor: variables.$bgColor,$textColor: variables.$textColor
);

styles/base/_base-variables.scss

$bgColor: #eee !default;
$textColor: #333 !default;

styles/base/index.scss

/* HOW IT WORKS */
$bgColor: #eee !default;
$textColor: #333 !default;

/* HOW I WISH IT WORKED */
@use "./base-variables" as *;

/* LATER IN THE FILE */
body {
  background-color: $bgColor;
  color: $textColor;
}

在 @use "../variables" as * 场景中，我收到此错误：

Error: This variable was not declared with !default in the @used module.

我正在寻找一个可行的解决方案，最好不要将所有主题变量复制粘贴到 with 括号内。

解决方法

首先是错误：

错误：此变量未在@used 模块中使用 !default 声明。

当您尝试 @use 带有配置变量的模块/文件但配置变量未设置为模块/文件中的 !default 变量时，会出现该错误。因此，SASS 会检查您是否传递了未为模块配置的配置。这对您来说是额外的安全。

我不太确定我是否真的理解你的例子，但可能是这样：

// styles/customerA/index.scss

@use "customerA-variables" as variables;
@use "../base/index" with (
  $bgColor: variables.$bgColor,$textColor: variables.$textColor
);

--> SASS ERROR because $bgColor and/or $textColor
--> in @used module/file are not set as defaults,i.e.:
--> $bgColor: green;
--> must be: $bgColor: green !default;

因此，如果变量都设置为默认值并且没有被非默认值覆盖，您可以检查模块。

**SECOND：@use 的用法：

新规则 @use 确实确实令人困惑......在您的示例中导致代码翻倍：一次当您在 customerA-variables.scss 中设置自定义变量时，然后当您在 @use 中重复该变量时{1}} styles/customerA/index.scss 中的模块/文件（请参阅您的第二个代码示例）。

避免重复代码的一个好方法是准备一个配置文件，其中包含个人客户的设置和配置文件（不是直接想要的模块/文件）。

示例：

@use

注意：还有一个额外的技巧/效果你应该知道。

你只需要设置一次变量......就在你配置模块/文件的时候。当您在模块配置文件中执行此操作时，您在其中设置的变量就是您项目配置的一部分！

因此，如果您第二次/第三次/...时间（即在其他部分文件中）需要模块的 SAME 变量，您可以在需要它/它们的任何文件中 // ### // ### module/file: ../base/index.scss $bgColor: #eee !default; $textColor: #333 !default; body { background-color: $bgColor; color: $textColor; } // ### // ### customer configuration file: configModuleCustomerA.scss @forward "../base/index" with ( $bgColor: red,$textColor: blue ); // ### // ### use that configuration file // ### to your main file: styles/customerA/index.scss @use "...path.../configModuleCustomerA" as *; // Note: // 1. that writes the configurated css // 2. and it provides the variables for additional use to THIS file // see going on this file below ... .additionalElement { background: $bgColor; color: $textColor; } // ### // ### ---> that compiles to CSS: body { background-color: red; color: blue; } .additionalElement { background: red; color: blue; } 该配置文件。不用担心：css 代码只编译一次到您的 CSS：第一次@use 模块。

但请注意您的情况：

但是如果你想@use一个具有不同配置的模块/文件，你必须将它编译成两个不同的 CSS 文件。加载到同一个 CSS 的具有两个或多个不同配置的一个模块被 SASS 阻止。在这种情况下，您需要将 css 拆分为不同的客户 css 文件，这些文件都使用不同的模块配置文件。