☰

AngularでSASSを使用してBootstrap 4を使用する方法 質問する

tag-icon • tag-icon angular sass angular-cli bootstrap-4
AngularでSASSを使用してBootstrap 4を使用する方法 質問する

Angular CLI で作成された Angular(4+) プロジェクトで、SASS を備えた Bootstrap 4 を使用したいと思います。

特に必要なのは:

  • グローバルスタイルとコンポーネントスタイルの両方でCSSの代わりにSASSを使用する
  • Bootstrap SASSソースをカスタム*.scssスタイルと一緒にコンパイルする
  • カスタム スタイルが Bootstrap ソースをオーバーライドしていることを確認します。これにより、必要に応じて Bootstrap ソース自体を編集せずに Bootstrap ソースをオーバーライドできます (Bootstrap ソース バージョンを簡単にアップグレードできます)。
  • ng serveスクリプトに、*.scss ファイルのいずれかが変更されるたびに (コンポーネントとグローバル スタイルの両方) 監視と自動再コンパイルを追加します。

ベストアンサー1

SASS を使用して Angular + Bootstrap 4 をセットアップするには、Angular CLI を構成し、Bootstrap 4 npm パッケージをインストールするだけです。SA​​SS コンパイラはすでに含まれているため、インストールする必要はありません。

編集: この回答は、新しいバージョンの Angular CLI (バージョン 6.1.3 でテスト済み) で動作するように更新されました。古い Angular CLI の手順はこの回答の最後に残しました。しかし、私は強くお勧めするAngular CLIのバージョンを更新する。

新しい ANGULAR CLI (バージョン 6 以上) を使用する手順

1) CSSの代わりにSASSを使用するようにAngular CLIを設定する

- 既存のプロジェクトについて:

ファイルを編集しangular.json、オブジェクト"styleext": "scss"にキー値を追加しますprojects.PROJECT_NAME.schematics.@schematics/angular:component。

次のようになります:

{
  // ...
  "projects": {
    "PROJECT_NAME": {
      // ....
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },
  // ...
}

- 新しいプロジェクトを作成するとき

単純に以下を使用します:

ng new my-project --style=scss

2) 既存のコンポーネントスタイルを CSS から SASS に変更します (存在する場合)

これを実現するには、スタイル ファイルの名前を から に変更し.css、.scssそれ@Component({ ... })に応じて構成を変更するだけです。

styleUrls: ['./my-component.scss']

このように、angular-cli は、などのコマンドを実行しているときにファイルが変更されるたびに、自動的にこれらのファイルを監視し、再コンパイルしますng serve。

3) Bootstrap 4を追加する

npm 経由で Bootstrap 4 をインストールします。

npm install bootstrap --save

次に、Bootstrap を配列angular-cli.json内の構成に追加しますstyles(Bootstrap ルールをオーバーライドできるように、他のカスタム CSS/SCSS ファイルの前に追加します)。

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

この方法により、Bootstrap 4 のソース コードはクリーンな状態に保たれ、新しいバージョンがリリースされるたびに簡単にアップグレードできるようになります。

4) カスタム（グローバル）SASSファイルを追加する

プロジェクト全体に影響する追加の SASS スタイル (単一のコンポーネント スタイルとは異なります) は、 の下に追加して、の配列app/assets/scssで参照できます。stylesangular-cli.json

私の提案は、main.scssすべてのカスタム SASS スタイルが含まれる単一のファイルを参照することです。たとえば、_variables.scssカスタム変数用の 、_global.scssグローバル ルール用の ファイルなどです。

したがって、angular-cli.json次の 1 つのカスタムmain.scssファイルのみを参照することになります。

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "src/assets/scss/main.scss"
],

内部にはすべてのカスタムグローバル* SASS コードが含まれます。

// main.scss 
@import "variables";
@import "global";
// import more custom files...

*注意：してはいけないことここに、*.scss個々のコンポーネントのスタイル ファイルを含めます。

5) Bootstrap JavaScript と jQuery の置き換えを含めます。

Bootstrapを使用できるプロジェクトがいくつかありますjQueryなし。

2つの例:

これら 2 つのプロジェクトの違いについては、次のとおりです。「ng-bootstrap」と「ngx-bootstrap」の違いは何ですか?

古い ANGULAR CLI を使用した手順

警告: この部分の回答はもう維持しませんので、代わりに読み進めることをお勧めします。Angular CLIのバージョンを更新する上記の手順に従ってください。

1) CSSの代わりにSASSを使用するようにAngular CLIを設定する

走る：

ng set defaults.styleExt scss

これは設定ファイルに影響します.angular-cli.json（例）。

注: 最初から始める場合は、次のコマンドを使用して Angular CLI で新しいプロジェクトを作成できます。ng new my-project --style=scssこれは、通常どおり新しいプロジェクトを作成してから上記のコマンドを実行するのと同じです。

2) 既存のコンポーネントスタイルを CSS から SASS に変更します (存在する場合)

これを実現するには、スタイル ファイルの名前を から に変更し.css、.scssそれ@Component({ ... })に応じて構成を変更するだけです。

styleUrls: ['./my-component.scss']

（例）。

このように、angular-cli は、などのコマンドを実行しているときにファイルが変更されるたびに、自動的にこれらのファイルを監視し、再コンパイルしますng serve。

3) Bootstrap 4を追加する

npm 経由で Bootstrap 4 をインストールします。

npm install bootstrap --save

次に、Bootstrap を配列.angular-cli.json内の構成に追加しますstyles(Bootstrap ルールをオーバーライドできるように、他のカスタム CSS/SCSS ファイルの前に追加します)。

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  /* ... */
],

（例）。

この方法により、Bootstrap 4 のソース コードはクリーンな状態に保たれ、新しいバージョンがリリースされるたびに簡単にアップグレードできるようになります。

4) カスタム（グローバル）SASSファイルを追加する

プロジェクト全体に影響する追加の SASS スタイル (単一のコンポーネント スタイルとは異なります) は、 の下に追加して、の配列app/assets/scssで参照できます。styles.angular-cli.json

私の提案は、すべてのカスタム SASS スタイルが含まれる単一のファイルを参照することですmain.scss。たとえば、_variables.scssカスタム変数用の 、_global.scssグローバル ルール用の ファイルなどです。(例）。

したがって、.angular-cli.json次の 1 つのカスタムmain.scssファイルのみを参照することになります。

"styles": [
  "../node_modules/bootstrap/scss/bootstrap.scss",
  "assets/scss/main.scss"
],

内部にはすべてのカスタムグローバル* SASS コードが含まれます。

// main.scss 
@import "variables";
@import "global";
// import more custom files...

*注意：してはいけないことここに、*.scss個々のコンポーネントのスタイル ファイルを含めます。

5) Bootstrap JavaScript と jQuery の置き換えを含めます。

Bootstrapを使用できるプロジェクトがいくつかありますjQueryなし。

2つの例:

これら 2 つのプロジェクトの違いについては、次のとおりです。「ng-bootstrap」と「ngx-bootstrap」の違いは何ですか?

おすすめ記事