Question

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 在/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"
  ]
}

现在-问题出现了。

每当我尝试从组件的scss文件中进行@import '~bootstrap/scss/_variables.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并不是某种颜色），但我不明白为什么它会破裂。

问题：

如何确保可以多次使用引导导入？
如何确保多次导入将仅访问值，而不多次导入引用的样式表？

导入Bootstrap 4 variables.scss会中断Angular 6编译

0 个答案: