我们如何将 ng-bootstrap 用于 mixins、变量答案

【问题标题】：How do we use ng-bootstrap for mixins, variables我们如何将 ng-bootstrap 用于 mixins、变量
【发布时间】：2019-05-05 00:18:23
【问题描述】：

我已经安装了@ng-bootstrap，现在我想在我的 app.component.scss 中使用 mixins，但出现错误

Failed to compile.
./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
@import "~bootstrap/scss/functions";
^
      File to import not found or unreadable: ~bootstrap/scss/functions.
      in C:\Users\xxxx\tutorial\xxxx\src\app\app.component.scss (line 1, column 1)

以下是我的 app.component.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import '~bootstrap/scss/mixins/_breakpoints';
.header_static{
  position: absolute;
  z-index: 500;
  padding-top: 15px;
  padding-bottom: 15px;
  @include media-breakpoint-down(xs) {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

【问题讨论】：

标签： angular ng-bootstrap

【解决方案1】：

尝试直接从 node_modules 文件夹导入

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/fucntions";
@import "../node_modules/bootstrap/scss/mixins/_brekapoints";

【讨论】：

【解决方案2】：

我这边有误会。我以为安装ng-bootstrap的时候会带上需要的bootstrap，但是不会。

完全错过了来自Bootstrap widgets - Introduction 的Here is a list of minimal required versions of Angular and Bootstrap CSS for ng-bootstrap: 然后在您的 src/styles.scss 上执行以下导入

@import "~bootstrap/scss/bootstrap";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/print";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/code";
@import "~bootstrap/scss/grid";

【讨论】：