Импорт Bootstrap 4 variables.scss прерывает компиляцию Angular 6 - PullRequest
0 голосов
/ 02 октября 2018

В приложении 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 по какой-то причине не является цветом), но я не понимаю, почему он ломается.

Вопросы:

  1. Как я могу убедиться, что могу использовать импорт начальной загрузки несколько раз?
  2. Как я могу убедиться, что несколько импортов будут иметь доступ только к значениям, но не будут импортировать ссылочные таблицы стилей несколько раз?
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...