1

我希望开始使用 SCSS 的 Bootstrap 4。我想我已经启动并运行了带有 SCSS 的 Bootstrap 4，但我想使用https://bootswatch.com的主题。当我将他们的主题与 BS3 一起使用时，您刚刚替换了直接的 LESS 文件。对于 BS4，他们有一个 _variables.scss 很明显可以替换，但是他们有一个 _bootswatch.scss 文件，我不能 100% 确定该怎么做。

我假设我只是将 _bootswatch 部分文件放在与所有其他 BS 部分文件相同的位置。然后我添加@import "bootswatch";到 bootstrap.scss 文件的末尾并重新编译，但这似乎确实有效。

我已经搜索并找不到任何关于此的信息。他们的文档主要展示了如何插入他们的预编译文件或使用他们的 CDN。很少使用他们的 SCSS 文件。

4

1 回答 1

1

我做了一些研究和测试，终于让它工作了。我想为有相同问题的其他人发布答案。希望这会对其他人有所帮助。

我创建了一个新的 MVC 5 项目，然后运行了以下 NuGet 包。

Install-Package bootstrap
Install-Package bootstrap.sass

这将注册 Bootstrap 并在文件夹中创建所有部分 scss 文件Content\bootstrap。然后我创建了 Content\scss 并将_variables.scssand_bootswatch.scss文件复制到该文件夹​​。

在我的 site.scss 文件中，我将以下导入添加到文件顶部。

@import "scss/variables";
@import "bootstrap/bootstrap.scss";
@import "scss/bootswatch";

您必须注意放置它们的顺序，任何其他顺序都会导致它不起作用或由于创建和调用变量的位置而引发错误。

如果你研究默认！您将了解到这与 !important 正好相反，导致该变量仅在未找到另一个设置时才使用该设置。在我看来，从 Bootswatch 中删除 !default 值会更准确，_varaiables这就是我所做的。然而，这最终似乎并没有影响任何事情。我仍然不得不使用上面的顺序。

然后我必须删除App_start\BundleConfig.cs文件中对 Bootstrap.css 的任何引用，并确保它引用了site.min.css包含所有引导类的文件。使用 Visual Studio 的 Web 编译器插件，我让它site.min.css为我创建和编译。

于 2018-03-02T15:49:20.373 回答