В приложении Angular CLI файлы scss структурированы следующим образом:
Папка, расположенная в /src/scss/
, содержит:
bootstrap.partials.scss
// Bootstrap partial imports to keep the bloat away
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
theme.scss
// This is a set of internal bootstrap variables overrides
@import 'variables';
$font-family-sans-serif: some-custom-font, Helvetica, Arial, sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-family-base: $font-family-sans-serif;
$body-bg: #fff;
$modal-transition: transform .1s ease-out !default;
variables.scss
$brand-primary: #621f37;
$brand-success: #23a023;
$brand-info: #5bc0de;
$brand-warning: #f0ad4e;
$brand-danger: #d9534f;
styles.scss at /src/
@import 'scss/variables';
@import 'scss/theme';
@import 'scss/bootstrap.partials';
@import '~bootstrap/scss/_variables.scss';
@import '~bootstrap/scss/_mixins.scss';
// Buttons
.btn-custom-inverted {
@include button-variant(white, $brand-primary);
color: $brand-primary !important;
}
.btn-custom {
@include button-variant($brand-primary, white);
color: white !important;
}
.custom {
color: $brand-primary !important;
}
.bg-custom {
background-color: $brand-primary !important;
color: white;
}
angular.json содержит по этому пути projects/[project-name]/architect/build/options
"stylePreprocessorOptions": {
"includePaths": [
"src/scss"
]
}
Сейчас - проблема следующая.
Всякий раз, когда я пытаюсь @import '~bootstrap/scss/_variables.scss';
из файла scss компонента, компиляция прерывается, и я получаю ошибки, которые обычно указывают на @link-hover-color
:
ERROR in ./src/app/home/containers/home-locations/home-locations.component.scss
Module build failed:
$link-hover-color: darken($link-color, 15%) !default;
^
Argument `$color` of `darken($color, $amount)` must be a color
in /Users/.../node_modules/bootstrap/scss/_variables.scss (line 170, column 29)
, что само по себе не имеет значения (очевидно,$link-color
по какой-то причине не является цветом), но я не понимаю, почему он ломается.
Вопросы:
- Как я могу убедиться, что могу использовать импорт начальной загрузки несколько раз?
- Как я могу убедиться, что несколько импортов будут иметь доступ только к значениям, но не будут импортировать ссылочные таблицы стилей несколько раз?