13

styles.scss で mixin を使用しようとしましたが、定義されていないと表示されます。私はもう試した：

  1. styles.scss で使用する
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

結果：

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

  1. ブートストラップの再インポート:

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

今は動作しますが、styles.bundle.js を見るとブートストラップが 2 回含まれています。Bootstrap は angular-cli.json に既に含まれています。

4

6 に答える 6

10

すべてのブートストラップを再度インポートするのではなく、実際には mixins ファイルと変数ファイルだけが必要です。

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

これらのファイルには、実際の CSS は含まれていません。SCSS 変数と mixin のみです。

于 2017-11-24T12:18:34.137 に答える
4

これには 2 つの方法があります。基本的に、どちらの方法も同じで、構文が異なるだけです。したがって、SCSS ファイルの先頭で、次の行を使用します。

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

また

@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"

于 2018-08-22T04:31:55.667 に答える
2

次の方法で、ミックスインをインポートして scss ファイルで使用できます。

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

また、ミックスインのみをインポートしようとすると、エラーが発生する場合があります。

于 2020-04-13T07:33:35.963 に答える