Префикс импорта с классами для создания тем не работает - PullRequest
Новая
       17

Префикс импорта с классами для создания тем не работает

0 голосов
/ 07 мая 2018

Я использую 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, и следует применить соответствующую тему, которую легко изменить, поменяв местами классы. Я знаю, что это дважды дублирует CSS Bootstrap 4, я новичок в 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 был построен для режима отладки. После того, как я покопался в файлах SASS для начальной загрузки и начальной загрузки, я обнаружил, что .bg-primary .navbar-nav .active > .nav-link является первым правилом в файле начальной загрузки ~bootswatch/dist/[theme]/bootswatch, и это заставляет меня поверить, что существует некоторая проблема при объединении файлов ~bootstrap/scss/bootstrap и ~bootswatch/dist/[theme]/bootswatch с селектор класса темы (darkly или yeti). Есть ли способ исправить эту ошибку или «игнорировать» ее, как это делает отладочная сборка?

...