Question

我已经安装了@ 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;
  }
}

Answer 1

尝试直接从node_modules文件夹导入

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

Answer 2

在我这边有一个误会。我以为安装ng-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";

我们如何将ng-bootstrap用于mixin，变量

2 个答案: