在类中使用CSS @import

Question

我正在尝试做以下事情：

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

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

无论如何，重点是能够确定bootstrap影响了什么。我希望将bootstrap应用于封闭的div元素。

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

有什么想法吗？这似乎应该很简单。

这篇文章建议将导入放在类内部。是否有其他替代方案？

- starvator

---

你不能这样使用import语句。你的语法是无效的。 - Mohamad

Answer 1

在 CSS 规则内部，您无法使用 @import。必须在任何选择器之外声明 @import 语句。

来自 @import 的 MDN 页面：

@import CSS at-rule 允许从其他样式表中导入样式规则。这些规则必须在所有其他类型的规则之前，除了 @charset 规则；由于它不是嵌套语句，因此不能在条件组 at-rules 内部使用。

您需要在 LESS 或 SASS 中编写此类内容，并将其预处理为 CSS。

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

- Alexander O'Mara

---

那么...我该如何实现这个呢？这篇帖子提到了这个确切的解决方案。 - starvator

@starvator 那个答案使用了LESS，它是一种预处理器，可以从LESS代码生成CSS，比如Bootstrap的源码LESS。这是无法通过纯CSS实现的。 - Alexander O'Mara