类中的 CSS @import

Question

我正在尝试执行以下操作:

.bootstrap-scope { 
  @import "bootstrap.min.css";
}

我知道 bootstrap.min.css 位于正确的位置，因为将 @import "bootstrap.min.css"; 放在 css 页面的顶部工作正常.

无论如何，重点是能够确定受 Bootstrap 影响的范围。我希望 bootstrap 仅应用于封闭的 div

<div class="bootstrap-scope">
...
</div>

有什么想法吗？这看起来应该很简单。

this post建议将导入放在一个类中。是否有其他选择？

Answer 1

您不能在 CSS 规则内 @import。 @import 语句必须在任何选择器之外声明。

来自the MDN page on @import :

The @import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules.

这样的功能需要嵌套的选择器，这在 CSS 中是不存在的。你必须用 LESS 或 SASS 编写这样的东西，并将其预处理成 CSS。

您的链接问题建议创建一个导入 Bootstrap 的 LESS 代码的 LESS 文件，然后将其编译为 CSS。