Angular CLI中的引导程序4

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

按照指导原则和步骤，我设置了angular-cli.json（designsystem.scss是我的主scss文件）：

然后，在该文件中：

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

在“_variables.scss”中，我粘贴了默认引导4“_variables.scss”的内容，并删除了所有

！默认值

s

到目前为止，我什么也没做。但是CLI一直在阻塞“变量”文件，寻找mixin，例如

./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'，基本引导SCS已正确处理和加载

那么，如何创建自定义版本的
\u variables.scss

更新：
即使我注释掉了mixin，构建也会在所有颜色函数上失败：

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

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

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

一些变量使用函数，特别是
theme-color（）
看起来我还需要在变量之前导入引导函数：

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

一些变量使用函数，特别是
theme-color（）
您不必像在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;
} 

您不必像在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;
} 

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

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

使用Bootstrap@4.0.0Beta:


$white:#fff；
$GRY-100:#f8f9fa；
$gray-200:#e9ecef；
$gray-300:#dee2e6；
$gray-400:#ced4da；
$gray-500:#adb5bd；
$gray-600:#868e96；
$gray-700:#495057；
$gray-800:#343A4；
$gray-900:#212529；
$black:000；
$grays：(
100美元：灰色-100美元，
200美元：灰色-200美元，
300美元：灰色-300美元，
400美元：灰色-400美元，
500美元：灰色-500美元，
600美元：灰色-600美元，
700美元：灰色-700美元，
800美元：灰色-800美元，
900美元：灰色-900美元
);
$blue:#007bff；
$indigo:#6610f2；
$purple:#6f42c1；
$pink:#e83e8c；
$red:#dc3545；
$orange:#fd7e14；
$yellow:#ffc107；
$green:#28a745；
$teal:#20c997；
$cyan:#17a2b8；
$colors：(
蓝色：暗蓝色，//更改默认颜色
靛蓝：$靛蓝，
紫色：$紫色，
粉红色：$粉色，
红色：$red，
橙色：$橙色，
黄色：$黄色，
绿色：$green，
蓝绿色：蓝绿色，
青色：$青色，
白色：$白色，
灰色：$gray-600，
深灰色：$gray-800
);
$主题颜色：(
蓝精灵：#0fa8d6，//添加您自己的自定义主题
小学：蓝色，
中学：$gray-600，
成功：$green，
信息：$cyan，
警告：$黄色，
危险：$red，
浅色：$gray-100，
深色：$gray-800
);我认为您遇到了一些问题，因为您在custom variables.scss文件中使用的函数和mixin尚未声明

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

使用Bootstrap@4.0.0Beta:


$white:#fff；
$GRY-100:#f8f9fa；
$gray-200:#e9ecef；
$gray-300:#dee2e6；
$gray-400:#ced4da；
$gray-500:#adb5bd；
$gray-600:#868e96；
$gray-700:#495057；
$gray-800:#343A4；
$gray-900:#212529；
$black:000；
$grays：(
100美元：灰色-100美元，
200美元：灰色-200美元，
300美元：灰色-300美元，
400美元：灰色-400美元，
500美元：灰色-500美元，
600美元：灰色-600美元，
700美元：灰色-700美元，
800美元：灰色-800美元，
900美元：灰色-900美元
);
$blue:#007bff；
$indigo:#6610f2；
$purple:#6f42c1；
$pink:#e83e8c；
$red:#dc3545；
$orange:#fd7e14；
$yellow:#ffc107；
$green:#28a745；
$teal:#20c997；
$cyan:#17a2b8；
$colors：(
蓝色：暗蓝色，//更改默认颜色
靛蓝：$靛蓝，
紫色：$紫色，
粉红色：$粉色，
红色：$red，
橙色：$橙色，
黄色：$黄色，
绿色：$green，
蓝绿色：蓝绿色，
青色：$青色，
白色：$白色，
灰色：$gray-600，
深灰色：$gray-800
);
$主题颜色：(
蓝精灵：#0fa8d6，//添加您自己的自定义主题
小学：蓝色，
中学：$gray-600，
成功：$green，
信息：$cyan，
警告：$黄色，
危险：$red，
浅色：$gray-100，
深色：$gray-800
);在sass/designsystem/designsystem.scss文件中导入变量之前添加这些导入

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

在sass/designsystem/designsystem.scss文件中导入_变量之前添加这些导入

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

你在用网页包吗？您的构建工具是什么？Angular CLI 1.2.1。使用
ngservice--sourcemap--extractCss
你在使用webpack吗？您的构建工具是什么？Angular CLI 1.2.1。使用
ngservice--sourcemap--extractCss