覆盖了大量的数据！Sass/Scss中@use规则的默认值

我有一个SCSS模块，里面有很多可重写的

！默认的

变量，我正试图在使用新规则的项目中使用它，而不是要弃用的@import。覆盖大量变量过去非常简单。只要我在导入模块之前导入了变量，它们就会优先于

！默认值


现在，如果我尝试在全局名称空间中使用模块，如下所示：

$h1-font-size: 40px;

@use 'my-module' as *;

我得到一个错误-
SassError：这个模块和新模块都定义了一个名为“$h1 font size”的变量。


显然，正确的方法是将
与
关键字一起使用，如下所示

@use 'my-module' with (
    $h1-font-size: 40px
);

但是现在我的
$h1 font size
变量对代码的其他部分不可用。它的唯一作用域是重写模块中的值。如果我尝试将它分配给其他对象，我会得到一个未定义的变量错误


那就让我做这个了

$h1-font-size: 40px;

@use 'my-module' with (
    $h1-font-size: $h1-font-size
);

.foo {
    font-size: $h1-font-size;
}

这正是我想要的效果——一个覆盖我的模块的变量，仍然可以在其他地方使用。但是，这种语法对于传递大量重写来说很麻烦。如果我想传递30个覆盖，我需要30个变量定义，然后在
with
块中的30行显式传递30个值


更新/编辑
下面来自@Miriam Suzanne的回答表明，为了提问，我已经过度简化了我的用例

我们的商店有一套我们在许多项目中使用的混搭和基本样式，我一直在尝试将它们转换为一个可重用的模块，以减少复制/粘贴。类似于引导，有很多可重写的
！默认值。很多工作正在进行中，但模块本身可以在此处看到：

这个模块是和我们实际使用的第一个项目一起开发的。
！默认值
都在模块中，我希望在项目中覆盖它们

现在我的
main.scss
（样式表的主要入口点）中有这样的代码

$base-font-family: 'Raleway', Tacoma, sans-serif;
$base-line-height: 1.8;

@use '~@evanshunt/derekstrap/index' with (
    $base-font-family: $base-font-family,
    $base-line-height: $base-line-height
);

我喜欢非常精细地构造我的scss文件，因此理想情况下，这些变量将实际存在于另一个文件中，并且也可用于项目中的其他文件

如果我执行如下操作，其中我的变量文件和模块都定义了
$base font family
变量，那么它会编译，但by variables不会覆盖模块

@use 'variables' as *;
@use '~@evanshunt/derekstrap/index' as *;

我怀疑在这一点上，答案是我需要将
@use
和/或
@forward
语句添加到我的变量文件中，但要想知道我是否能够成功地覆盖项目代码不同部分中模块的不同部分，我的大脑有点崩溃。上面关于只使用一个变量文件的建议也有点简化。如果我在使用
@use
d的文件中修改同一名称空间，则my
main.scss
中
@use
语句的顺序将变得多么重要


我明白了明确定义范围和传递值的目的，但我喜欢一些速记或技巧来实现这一点，而不需要编写太多额外的代码。正如在我的Sass中提到的，我希望能有一个简单的简写，将一个上下文传递到另一个上下文，如：

@use 'variables' as variables;
@use 'module' with variables;

这似乎是不可能的，我想知道我是否需要完全重新思考我构建SCSS文件的方式，以实现我想要的。我能在这里做些什么？
我不完全清楚您所说的变量“对我的代码的其他部分不可用”是什么意思。
@use
的全部目的是使这些变量可用——但要在名称空间内。因此，您可以：

@use 'module' with (
    $h1-font-size: 40px
);

.foo {
    font-size: module.$h1-font-size;
}

或者使用
作为*
删除名称空间：

@use 'module' as * with (
    $h1-font-size: 40px
);

.foo {
    font-size: $h1-font-size;
}

或在添加配置的同时转发模块，以便在其他文件中使用：

@forward 'module' with (
    $h1-font-size: 40px !default
);

或者两者同时进行：

@forward 'module' with (
    $h1-font-size: 40px !default
);

@use 'module';

.foo {
    font-size: module.$h1-font-size;
}

我认为这可能涵盖了所有可能用于再次定义同一变量的潜在用例


在回答关于这个问题的最新消息时

使用模块语法意味着文件之间没有全局作用域。这意味着每个单独的文件都需要显式地使用该文件所需的所有模块。这意味着：


您需要在每个文件的顶部使用“~@evanstrap/derekstrap/index”
（或类似）来访问derekstrap mixin、变量或函数
由于
索引
文件是自动导入的，并且默认名称空间是基于路径生成的，因此我可能会
@使用“~@evanspitch/derekstrap”
名称空间始终是导入文件的本地名称空间，因此您可以在一个位置使用“~@evanplunch/derekstrap”

（创建

derekstrap

名称空间），在另一个位置使用“~@evanplunch/derekstrap”作为*（删除名称空间），在第三个位置仍然使用“~@evanplunch/derekstrap”作为derek

的目标！默认的

“可配置”变量是在任何编译之前都可以预先配置它们。这必须在“第一次”使用模块时发生。如果要在一个文件中单独执行此操作，可以：

// _config.scss
@use '~@evanshunt/derekstrap' with (
  $h1-font-size: 40px,
);

// main.scss
@use 'config'; // keep this path first...
@use 'anything-else';

// _anything-else.scss
@use '~@evanshunt/derekstrap';
// derekstrap.$h1-font-size will already be configured by config.scss

这些值只能预配置一次，这意味着编译将从配置值开始。但您可以随时在任何文件中更新这些变量：

// _anything-else.scss
@use '~@evanshunt/derekstrap';

derekstrap.$h1-font-size: 32px;
// The $h1-font-size now has a value of 32px
// for any file to uses derekstrap later in the compilation

在我的网站上，我使用这两种方法的组合-就在我的单色配置文件中：

我有

@use…with

模式来配置

层叠颜色系统

，但我也使用

装备

工具而不进行配置，然后覆盖

工具。$colors

通过添加转发层，您可能会变得更加复杂，但这应该可以让您开始。记住：