web-dev-qa-db-ja.com

BootstrapのSASSでAngular 4を使用する方法

Bootstrap CLIで作成されたAngular（4+）プロジェクトのSASSでAngular 4を使用したいと思います。

特に私がする必要があるのは：

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

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

EDIT：この回答は、新しいバージョン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']

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

3）Bootstrap 4を追加します

NpmでBootstrap 4をインストールします。

npm install bootstrap --save

ここで、Bootstrapルールをオーバーライドできるようにするために、bootstrapをstyles配列内のangular-cli.json構成に追加します（他のカスタムcss/scssファイルの前に：

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

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

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

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

私の提案は、すべてのカスタムSASSスタイルを含む単一のmain.scssファイルを参照することです。たとえば、カスタム変数の_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...

* MUST NOT単一のコンポーネントの*.scssスタイルファイルをここに含めることに注意してください。

5）Bootstrap JavaScriptおよびjQueryの置換を含めます。

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

2つの例：

これら2つのプロジェクトの違いについては、ここで説明します。 「ng-bootstrap」と「ngx-bootstrap」の違いは何ですか？

古いANGULAR CLIを使用した手順

WARNING：答えのこの部分はもう維持しないので、代わりに読み続けることをお勧めします Angular CLIバージョン を更新し、上記の手順に従ってください。

1）CSSの代わりにSASSを使用するようにAngular CLIを構成します

実行：

ng set defaults.styleExt scss

これは.angular-cli.json構成ファイル（ example ）に影響します。

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

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

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

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

（ example ）。

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

3）Bootstrap 4を追加します

NpmでBootstrap 4をインストールします。

npm install bootstrap --save

ここで、Bootstrapルールをオーバーライドできるようにするために、bootstrapをstyles配列内の.angular-cli.json構成に追加します（他のカスタムcss/scssファイルの前に：

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

（ example ）。

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

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

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

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

したがって、.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...

* MUST NOT単一のコンポーネントの*.scssスタイルファイルをここに含めることに注意してください。

5）Bootstrap JavaScriptおよびjQueryの置換を含めます。

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

2つの例：

これら2つのプロジェクトの違いについては、ここで説明します。 「ng-bootstrap」と「ngx-bootstrap」の違いは何ですか？

101
Francesco Borzi

@ShinDarthの answer に加えて、すべてのモジュールではなく、必要なBootstrapモジュールのみをインポートして、より最小限のソリューションにしたい場合があります。

だからあなたは置き換えます：

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

と：

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

次に、main.scssは次のようになります。

// import only the Bootstrap modules you need, e.g.
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/forms";
// import your own custom files, e.g.
@import "variables";
@import "global";
19
Leo

バージョン6から

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

あなたが私の作品のためのカスタムテーマを持っている場合

styles.scssにのみlibを追加します

@import "./assets/scss/mytheme";
@import "~bootstrap/scss/bootstrap";
5
Whisher

Angular-cliを使用してBootstrap 4を実行したときに発生したJavascript依存関係の問題に他の誰かが遭遇した場合、boostrap 4が必要とする他の依存関係をインストールしたことをangle-cliコンパイラーに知らせる必要もあります：

jquery、popper.js、bootstrap.js

そのためには、.angular-cli.json構成ファイルのスクリプト配列を次のように変更する必要があります。

"scripts": [
    "../node_modules/jquery/dist/jquery.slim.js", 
    "../node_modules/popper.js/dist/umd/popper.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"]

npm install --save jquery popper.jsを使用してjqueryとpopperをインストールしたので、これらのパッケージはnode_modulesフォルダーで利用できると思います。

0
vhbazan

ここに私がうまく構築することができた代替方法があります

1-ブートストラップをインストールする

npm install bootstrap

これにより、node_modulesの下にboostrap scssファイルが追加されます。 （ステップ2-6は https://code.visualstudio.com/docs/languages/css からのものです）

2-node-sassのインストール

nmp install -g node-sass

これは、sassをcssに変換する必要があります

3-scssおよび生成されたcssファイルを保持するのに適した場所にフォルダーを作成します。例えば.

your-project/
├── scss
│   └── custom.scss   
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

4-次のコンテンツを含むcustom.scssファイルを作成します。

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

5-Ctrl + Shift + BでVSCodeにタスクを作成>タスクを設定>テンプレートからtasks.jsonファイルを作成>その他

.vscodeの下にあるtasks.jsonファイルは、デフォルトのコンテンツで作成されます。コンテンツを置き換えます

// Sass configuration
{
  // See https://go.Microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "tasks": [{
    "label": "Sass Compile",
    "type": "Shell",
    "command": "node-sass scss/custom.scss scss/custom-bootstrap.css",
    "group": "build",
    "problemMatcher": [
      "$eslint-stylish"
    ]
  }]
}

注：必要に応じてファイル名とパスを変更します。

6-タスクを実行してcssを生成します：Ctrl + Shift + B> 'Sass compile'または

7-bootstrapテーマ手順の手順に従います：（ https://getbootstrap.com/docs/4.1/getting-started/theming/ ）

0
Atilla Baspinar