有效地覆盖 Bootstrap CSS

Question

我一直在寻找有效覆盖 Bootstrap CSS 的方法。我看到了许多问题及其答案，其中两个值得注意的是：

• Bootstrap variable overriding with LESS
• best way to override bootstrap css

但我不相信它们涉及我的特定用途。我也很欣赏对我的思维过程的批评，如果它甚至值得付出努力。来了。

这是我想做的事情：

1. 使用 Less/Sass 来利用 Bootstrap 的内置变量并进行框架范围的更改，例如导航栏高度或折叠断点。这些用 CSS 很难做到，但用 Less/Sass 很容易做到，所以你可以在这里看到优势。
2. 通过 CDN 使用引导程序。这样做有很多好处，从性能到可靠性。
3. 链接到（托管）一个包含我唯一更改的样式表。这减少了文件大小以及 CSS 冗余，只保留必要的覆盖。它还提高了客户端和服务器的性能。

如果我只是编辑 Less 文件并重新编译它们，我基本上会自己托管 Bootstrap，不需要 CDN。但是，如果我通过 CDN 托管 Bootstrap 并且只托管我自己的更改，那么我知道的唯一方法是使用纯 CSS，从而失去了 Less 变量的优势。

想法？

Answer 1

我会通过 CDN 导入引导程序，然后有一个单独的 css 文件（从 less 生成），它使用比引导程序更具体的选择器。

唯一的问题是使用更少的变量。如果它们都在一个单独的文件中，请导入该文件。或者您可能不得不硬着头皮将它们手动复制到您自己的文件中。这可能没问题，因为您无论如何都要覆盖 css。

确保您在 CDN 链接中设置引导程序的版本，而不是使用最新的。否则可能会出现新版本并破坏事物。