显示错误 - 在 SASS 中扩展类时无法扩展答案

【问题标题】：Shows Error - failed to extend when a class is extended in SASS显示错误 - 在 SASS 中扩展类时无法扩展
【发布时间】：2022-03-30 16:30:36
【问题描述】：

.class{
  color:#333;
}

.ex-class{
 @extend .class;
}

显示错误：

“.ex-class”未能扩展“.class”
未找到选择器“.class”。
这将是 Sass 未来版本中的错误
如果扩展应该能够失败，请使用 "@extend .class !optional"

是什么让我遇到了麻烦，Sass 在我系统上的所有其他 git Repos 上编译得很好，我尝试通过更改 Sass 版本，我的团队成员在这个 Sass 和相同版本上工作正常。

【问题讨论】：

它们是否像示例中那样位于另一个下方？还是它们在单独的样式表中？
单独的样式表并包含在内，我的团队成员可以很好地使用这个
是的，所有内容都以正确的顺序包含在内，而且这个 Sass 对我的团队成员也很有效
“我的团队成员在这个 Sass 和相同版本上工作得很好。” => 3.4.6 != 3.2.18 != 3.4.4...
谢谢。我被困了几个小时。

标签： css sass compass

【解决方案1】：

@extend 警告是在 Sass 3.2.0 中引入的：

任何与文档中的任何选择器都不匹配的@extend 现在都会打印警告。这些警告将在未来版本的 Sass 中成为错误。这将有助于防止出现拼写错误，并更清楚地说明为什么损坏的样式不起作用。

在 Sass 3.3.0 中，它停止警告用户，只是抛出一个错误：

现在，当使用无效的 @extend 时，Sass 会抛出错误。 !optional 标志可用于避免单个 @extend 的这种行为。

请注意，@extend 在 Sass 历史中已经修复了许多错误（3.1.13、3.2.5、3.2.6、3.2.8 和 3.2.9），尤其是当它与媒体查询一起使用时.我建议您和您的团队至少使用 Sass v3.3.0。

如果您的代码按“原样”编写，则不应出现任何错误/警告。如果您使用@import，或者如果该块完全/部分写入媒体查询中，则可能有问题。

【讨论】：

有什么方法可以解决这个问题？
对于他的特定示例，我会选择使用占位符而不是 @extend。
是否可以通过降级 Sass 版本来纠正使用 @extend 的问题？如果是这样，我应该使用哪个版本？是否通过在 Sass 上使用 @extend .class-name !optional 来消除错误？感谢您的支持
如果您使用!optional，您将不会再收到警告。但是，如果你使用的是 Sass 3.4，你甚至不应该拥有它。

【解决方案2】：

我也遇到了同样的问题：

document [name="variable"]" failed to @extend "%variableSCSS".
The selector "%variableSCSS" was not found.
Use "@extend %variableSCSS !optional" if the extend should be able to fail.
_styles.scss

使用 _styles.scss 中的 @import variableSCSS.scss 解决了问题

_variableSCSS.scss 是包含“%variableSCSS {...}”的文档。因此，请检查您的 @imports 是否在您正在使用的类上正确调用。

【讨论】：

【解决方案3】：

如果您使用的是@import，请检查包含文件扩展名的权限。必须是.scss

【讨论】：