如何在Angular 5中使用Bootswatch主题

Question

我正在尝试在一个Angular 5项目中使用Bootswatch主题。我使用Bootswatch和Bootstrap版本4.0.0-beta-2。我通过npm安装了这两个工具，并在我的主styles.scss中使用常用的angular-cli/webpack约定将_variables.scss和_bootswatch.scss导入到我的styles.scss中。我还将相关的主题bootstrap.min.css导入到此文件中，并将其添加到angular.cli.json中的styles[]数组中。

在构建过程中，我得到：

@include box-shadow(none);
        ^
     No mixin named box-shadow

和一个破碎的构建。

Answer 1

您正在使用angular 4-5。因此，按照所述，npm install bootswatch并附加style.scss文件中的相关库。

您没有按顺序包括这些库。尝试像这样导入它。

@import "../node_modules/bootswatch/dist/materia/variables"; @import "../node_modules/bootstrap/scss/bootstrap"; @import "../node_modules/bootswatch/dist/materia/bootswatch"; @import "../node_modules/bootswatch/dist/materia/bootstrap.min.css";