Question

我尝试在styles.scss中使用mixin，但它说它没有定义。我试过了：

在styles.scss

@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

结果：

@include media-breakpoint-up(sm) {
        ^
      No mixin named media-breakpoint-up

再次导入bootstrap：

@import“../ node_modules / bootstrap / scss / bootstrap.scss”;

现在它可以正常工作，但如果我查看styles.bundle.js，则会包含两次bootstrap。 Bootstrap已包含在angular-cli.json中。

Answer 1

我自己的文件夹中的所有组件都遇到相同的问题 projects/<prj>/src/app/navbar/navbar.scss：

我已经修复了手动添加的临时问题

   @import '~bootstrap/scss/functions';
   @import '~bootstrap/scss/variables';
   @import '~bootstrap/scss/mixins';

我确定那不是很美，但是可以解决它...

我的软件包版本如下

Angular CLI: 7.0.6
Node: 9.10.1
OS: darwin x64
Angular: 7.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.10.6
@angular-devkit/build-angular      0.10.6
@angular-devkit/build-ng-packagr   0.10.7
@angular-devkit/build-optimizer    0.10.6
@angular-devkit/build-webpack      0.10.6
@angular-devkit/core               7.0.6
@angular-devkit/schematics         7.0.6
@angular/cli                       7.0.6
@angular/fire                      5.1.0
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.0.6
@schematics/angular                7.0.6
@schematics/update                 0.10.6
ng-packagr                         4.4.5
rxjs                               6.3.3
typescript                         3.1.6
webpack                            4.19.1

Answer 2

而不是再次导入所有引导程序，实际上只需要mixins文件和变量文件：

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

这些文件中没有实际的CSS - 只有SCSS变量和mixins。

Answer 3

有两种方法可以做到这一点。基本上，这两种方式都是相同的，只是语法不同。因此，在SCSS文件的顶部，使用以下行：

@import "~bootstrap/scss/bootstrap-grid.scss";

OR

@import "../../node_modules/bootstrap/scss/bootstrap-grid.scss";

这是一个完整的示例：

main.scss

@import "~bootstrap/scss/bootstrap-grid.scss

.test {
  background-color: yellow;
}
@include media-breakpoint-up(md) {
  .test {
    background-color: red;
  }
}

HTML代码：

<div class="test">
  This div should have yellow background on mobile and red background in medium devices and up.
</div>

注意：：这假定您已经在 package.json 文件中的依赖项列表中包含Bootstrap。如果没有，则可以在其中添加以下行，并且可以根据需要更改Bootstrap版本。

"bootstrap": "4.1.3"

Answer 4

您可以通过以下方式导入mixins以在scss文件中使用：

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

此外，如果您尝试仅导入mixins，则可能会出现错误。

Answer 5

我最近提交了一些方便的额外混合包。随时使用https://github.com/Omi0/boostrap-mixins

如何在angular-cli中使用bootstrap mixins

5 个答案: