1

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

更新

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

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

3 回答 3

5

请参阅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";
于 2018-08-15T19:35:42.913 回答
0

只需导入以下

@import "~bootswatch/dist/cerulean/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/cerulean/bootswatch";

请注意，使用~<modulename> 您可以直接引用该模块在node_modules目录下的路径。您可以在上面给定的路径中看到您的 scss 文件。

于 2021-12-31T07:32:42.943 回答
0

在下面的 bootstrap.scss 文件中导入它。

@import "bootswatch";
于 2017-12-29T16:59:09.837 回答