我正在尝试使用在另一个局部中的一个局部上声明的变量，这两个变量都将使用@use加载到main.scss文件中，然后将其编译为CSS。
设置如下：
style.scss
@use './global';
@use './header';
_global.scss
$black: #262626;
_header.scss
header {
color: $black
}
当我尝试编译style.css时，出现此错误：
C:\xampp\htdocs\Site\styles>sass style.scss:style.css
Error: Undefined variable.
╷
3 │ color: $black;
│ ^^^^^^
╵
_header.scss 3:10 @use
style.scss 2:1 root stylesheet
如果在我的主要style.scss中使用@import而不是@use，它会很好地工作，但是Sass的开发人员建议不要使用@import，因为它将最终被弃用。
他们说使用@use代替，并且@use比@import具有许多优点，其中之一就是@use的所有实例都可以同时加载。我认为这是导致此问题的原因，因为_global.scss不会在依赖_global.scss中定义的$ black的页面之前加载，因此这些页面在未定义$ black的情况下加载。
有任何想法吗？
@use加载的成员（变量，函数和混合）仅在加载它们的样式表中可见
考虑import使用JavaScript而不是使用Sass@import语法的传统全局范围。
我认为您可能会尝试执行以下操作：
global.scss
$black: #000;
header.scss
@use "global";
.header {
color: global.$black;
}
button.scss
@use "global";
.button {
color: global.$black;
}
index.scss
@use './button';
@use './header';
这可能比您传统上使用Sass时要冗长/繁琐，但是从长远来看，它无疑具有巨大的好处-特别是如果您是框架或库的作者，或者甚至与您使用现有的框架自己修改。
许多开发人员（包括我自己在内）必须面对的Sass的一个大痛点是在根范围内声明的变量，实际上，所有Sass函数都是全局可用的。尽管有时这很方便，但在集成外部编写的库或在具有许多分布式团队的大型公司中工作时，也会导致大量冲突。
例如：如果我将Bootstrap用作网站样式的基础，并且加载了一个定义自己的gradient-bgmixin（也在TWBS中定义）的附加库，那么哪个mixin是正确的使用？加载顺序对此有影响，您可能看不到任何问题，但是您可能还会在预期输出中看到巨大的差异，这现在需要您深入研究这些库以了解正在发生的情况。
该@use规则通过确保仅在加载它们的样式表内部访问模块成员（变量，函数和混合）来解决此问题。它还具有让您进一步简化成员名称的另一个好处-由于成员名称的作用域是名称空间（模块URL的最后一个组成部分），因此您可以继续定义$padding或@mixin flex {}。
最终，这可以帮助您在逻辑上将自己的代码组织到一个结构中，从而可以更轻松地维护代码（对于您的同事以及您自己）。明确说明代码的功能并没有错，尤其是因为您希望在将来计划进行更新时希望代码可靠且可预测。
就个人而言，我非常喜欢与以下结构相似的结构：
styles
|-- global
| |-- functions.scss
| |-- spacing.scss
| |-- typography.scss
| |-- ...etc...
|-- component
| |-- button.scss
| |-- header.scss
| |-- ...etc...
在这种情况下，您的代码将类似于：
button.scss
@use "global/spacing.scss";
@use "global/typography.scss";
.button {
font-size: typography.$standard;
padding: spacing.$standard;
}
当然，这全都取决于个人喜好，我了解有些人可能不是新命名空间的粉丝。这可以有所缓解，也可以完全忽略。
@use使用新的Sass模块系统时，使用时不能将项目放在全局名称空间中@use。但是，可以使用@use "path/to/file" as *;语法加载不带名称空间的模块。这将使您无需<namespace>.<member>语法即可直接访问成员。
@import如果仍然不能满足您的需求，您当然可以@import在可预见的将来继续使用该规则。该团队打算一直支持@import到2022年10月左右的某个时候。此时，您始终可以将Sass的版本固定为support的最新版本@import。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句