Question

我在core.scss文件中的@import“boostrap”也导入了其他scss文件（例如：_modals.css）。

在modals.css中我想扩展一些引导类：

.modal-container {
  @extend .row;
}

并且扩展无法按预期工作：

警告第42行 ...... / _ modals.css.scss： “.row”未能@extend“.row”。找不到选择器“.row”。这将是Sass未来版本中的错误。使用“@extend .row ！可选“如果扩展应该能够失败。

我使其工作的唯一方法是再次@import“bootstrap” _modals.scss但这实际上包含了这个文件中的整个bootrap ...

另一个解决方案是移动所有扩展css的定义 core.css文件 - 在这种情况下 - css的结构要少得多......

我该怎么做呢？

Answer 1

问题是因为我还通过sass require / require_tree命令导入了文件。

 *= require_tree ./autoinclude

如果所有文件都是通过@import函数导入的，那么一切正常！

@import "autoinclude/*";

Answer 2

.row必须位于前一行代码中的同一文件中。

@extend并不是那么好，你不能在媒体查询中使用它，如果你过度使用它，你最终会在代码上引入不一致。

在另一个文件中定义mixin并使用@import