Question

我正在使用Bootswatch和Bootstrap为Angular应用程序提供两个主题。有一个主题一直使用，我可以这样做：

@import "~bootswatch/dist/yeti/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/yeti/bootswatch";
@import "./assets/custom.scss";

我为用户提供切换主题选项的想法就是这样做：

.yeti {
    @import "~bootswatch/dist/yeti/variables";
    @import "~bootstrap/scss/bootstrap";
    @import "~bootswatch/dist/yeti/bootswatch";
    @import "./assets/custom.scss";
}

.darkly {
    @import "~bootswatch/dist/darkly/variables";
    @import "~bootstrap/scss/bootstrap";
    @import "~bootswatch/dist/darkly/bootswatch";
    @import "./assets/custom.scss";
}

然后我可以将yeti或darkly类应用于根html元素，并且应该应用相应的主题，并且通过交换类很容易更改。我知道这两次重复Bootstrap 4 CSS，我是SASS的新手，所以这是我能想到的最佳方式。

我使用ng build --ec构建时效果很好，但是当我尝试为prod ng build --prod构建时，我会收到以下错误：

WARNING in Unexpected '}' at 7837:43.

WARNING in Unexpected '}' at 15101:43.

WARNING in Invalid property name '.yeti {
        size' at 7820:6. Ignoring.

WARNING in Invalid selector '}
.yeti .navbar' at 7837:43. Ignoring.

WARNING in Invalid property name '.darkly {
        size' at 15084:6. Ignoring.

WARNING in Invalid selector '}
.darkly .bg-primary .navbar-nav .active > .nav-link' at 15101:43. Ignoring.

这会显着破坏我的导航栏，当为调试模式构建相同的SASS时，这不会发生。在浏览了bootswatch和bootstrap SASS文件之后，我发现.bg-primary .navbar-nav .active > .nav-link是bootswatch ~bootswatch/dist/[theme]/bootswatch文件中的第一条规则，这让我相信连接~bootstrap/scss/bootstrap时存在一些问题和~bootswatch/dist/[theme]/bootswatch文件以及主题类选择器（darkly或yeti）。有没有办法解决这个错误，或者＆＃34;忽略＆＃34;它是调试构建的方式吗？

使用类进行前缀导入无效

0 个答案: