如何使用 -bootswatch.scss 更新 Bootstrap？

Question

我是 SCSS 新手，我正在尝试将使用 Bootstrap 3 的站点升级为使用 Bootstrap 4。使用 Bootswatch 3，我只需将 bootstrap.less 和 variables.less 文件替换为从 Bootswatch 下载的主题。但是，对于 SCSS 版本，该文件被标记为 _bootswatch.scss 而不是 _bootstrap.scss。我只是将 bootswatch 文件命名为引导程序名称，然后在我的项目中覆盖该文件，还是只需要在导入引导程序下方的 @imports 中包含 _bootswatch？bootswatch 中的 _variables.scss 设置也比 bootstrap 中的少很多。所以，我假设我实际上不会替换 bootstrap 中的 _variables 而只是在 bootstrap 导入后导入 bootswatch 版本？

更新

这是我在 Site.scss 中的内容，但它似乎没有采用这种样式。文件夹结构是正确的路径。它们是由 Visual Studio 的智能感知创建的。我假设这应该有效。

@import "SASS/bootstrap/bootstrap.scss";
@import "SASS/bootswatch/cerulean/_bootswatch.scss";
@import "SASS/bootswatch/cerulean/_variables.scss";

Answer 1

请参阅https://github.com/thomaspark/bootswatch 上的文档。

他说：

确保在 _variables.scss 和 _bootswatch.scss 之间导入 Bootstrap 的 bootstrap.scss！

所以这就是我正在使用的：

//The order of the next 4 lines must be: my variable overrides (optional), bootswatch _variables, bootstrap, bootswatch _bootswatch
@import "variables";
@import "bootswatch_theme_slate/_variables";
@import "../../../node_modules/bootstrap/scss/bootstrap";
@import "bootswatch_theme_slate/_bootswatch";