Angular CLI 中的引导程序 4答案

【问题标题】：Bootstrap 4 in Angular CLIAngular CLI 中的引导程序 4
【发布时间】：2018-02-27 07:03:00
【问题描述】：

我正在尝试在我的 Angular 4 CLI 项目中使用 Bootstrap 4 scss 文件进行设置。

按照here 和here 的指导方针，我已经像这样设置了angular-cli.json（designsystem.scss 是我的主要scss 文件）：

 "styles": [
    "sass/designsystem/designsystem.scss",
    "../node_modules/prismjs/themes/prism.css",
    "styles.scss"
  ],

然后，在那个文件中：

@import 'variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

在“_variables.scss”中，我粘贴了默认 Bootstrap 4 “_variables.scss”的内容并删除了所有!defaults。

到目前为止，我没有覆盖任何内容。但是 CLI 一直在“变量”文件中阻塞，寻找 mixins，例如

./src/sass/designsystem/designsystem.scss
Module build failed: ModuleBuildError: Module build failed: 
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
    ^
  No mixin named -assert-ascending

Backtrace:
  src/sass/designsystem/_variables.scss:190

如果我注释掉我的 @import 'variables';，则基本引导程序 scss 已处理并正确加载。

那么，如何创建我的自定义版本的_variables.scss？

更新：

即使我注释掉 mixins，所有颜色函数的构建都会失败：

$btn-focus-box-shadow:           0 0 0 3px rgba(theme-color("primary"), .25);
                                      ^
  Argument `$color` of `rgba($color, $alpha)` must be a color

【问题讨论】：

你在使用 webpack 吗？你的构建工具是什么？
Angular CLI 1.2.1。使用ng serve --sourcemap --extractCss

标签： angular sass angular-cli bootstrap-4 bootstrap-sass

【解决方案1】：

在 sass/designsystem/designsystem.scss 文件中的 _variables 导入之前添加这些导入。

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/bootstrap";

【讨论】：

【解决方案2】：

看起来我需要在变量之前还导入 Bootstrap 函数：

@import '../../../node_modules/bootstrap/scss/functions';
@import 'variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

几个变量使用函数，特别是theme-color()

【讨论】：

【解决方案3】：

您不必像在 bootstrap.scss 中那样导入变量。只需执行以下操作，您就可以开始了：

// overriding bootstraps browser default to 14px instead of 16px
$font-size-base: .875rem;
$font-size-lg: 1rem;
$font-size-sm: .75rem;

@import '../../../../node_modules/bootstrap/scss/bootstrap';

.font-lg{
    font-size:$font-size-lg;
}

.font-md {
    font-size: $font-size-base;
}

.font-sm {
    font-size: $font-size-sm;
}

【讨论】：

【解决方案4】：

我相信您遇到了问题，因为您在自定义 variables.scss 文件中使用了尚未声明的函数和 mixin。

您可以通过仅覆盖变量而不是派生文件的其余部分来解决这些问题。

使用 Bootstrap@4.0.0Beta：

$white:  #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #868e96;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:  #000;

$grays: (
        100: $gray-100,
        200: $gray-200,
        300: $gray-300,
        400: $gray-400,
        500: $gray-500,
        600: $gray-600,
        700: $gray-700,
        800: $gray-800,
        900: $gray-900
);

$blue:    #007bff;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #e83e8c;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #28a745;
$teal:    #20c997;
$cyan:    #17a2b8;

$colors: (
        blue: darkblue, //change a default color
        indigo: $indigo,
        purple: $purple,
        pink: $pink,
        red: $red,
        orange: $orange,
        yellow: $yellow,
        green: $green,
        teal: $teal,
        cyan: $cyan,
        white: $white,
        gray: $gray-600,
        gray-dark: $gray-800
);

$theme-colors: (
        smurf: #0fa8d6, //add your own custom theme
        primary: $blue,
        secondary: $gray-600,
        success: $green,
        info: $cyan,
        warning: $yellow,
        danger: $red,
        light: $gray-100,
        dark: $gray-800
);

请注意，这些只是变量，仅此而已。现在只需在引导之前导入 variables.scss 就可以了：

@import 'variables';
@import '../../node_modules/bootstrap/scss/bootstrap';

【讨论】：