无法将Bootswatch主题添加到Bootstrap 4中?​​

时间:2018-03-01 14:31:37

标签: sass bootstrap-4 bootswatch

我希望使用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文件很少。

1 个答案:

答案 0 :(得分:1)

我做了一些研究和测试,最后还是开始工作了。我想用同样的问题为其他人发一个答案。希望这会帮助其他人。

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

Install-Package bootstrap
Install-Package bootstrap.sass

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

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

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

您必须注意将它们放入的顺序,任何其他顺序都会导致它无法工作或因为创建和调用变量的位置而引发错误。

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

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