如何在 angular-cli 中使用 bootstrap mixins

Posted 2023-03-06

【中文标题】如何在 angular-cli 中使用 bootstrap mixins

【英文标题】：How do I use bootstrap mixins in angular-cli

【发布时间】：2018-05-08 10:58:46

【问题描述】：

我尝试在我的 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

再次导入引导程序：

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

现在它可以工作了，但是如果我查看 styles.bundle.js，就会包含两次引导程序。 Bootstrap 已经包含在 angular-cli.json 中。

【参考方案1】：

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

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

另外，如果你尝试只导入 mixins，它可能会给你一个错误。

【讨论】：

适用于 Angular 13.1.1 和 Bootstrap 5.1.3。

【参考方案2】：

我对自己文件夹中的所有组件都有同样的问题 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

【讨论】：

感激不尽！它在 main.js 中为我节省了 4mb

【参考方案3】：

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

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

或

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

这是一个完整的例子：

ma​​in.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"

【参考方案4】：

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

【参考方案5】：

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

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

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

【讨论】：

看来，函数应该在变量之前声明。 （对于引导 4x）

【参考方案6】：

如果您使用的是 sass，您可以直接将 bootstrap 导入您的 styles.scss 中，无需将其添加到 angular-cli.json 文件中。

更多信息-> https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

【讨论】：

在我的情况下，我在使用此解决方案时遇到了错误，我想不出我希望避免它。