web-dev-qa-db-ja.com

角度-cliとng-bootstrapを使用してBootstrap 4 SCSS変数をカスタマイズする方法は？

私はangular-cliを使用してAngular 4アプリを構築しています。ng-bootstrapを使用してBootstrap 4を含めたいです。 http://v4-alpha.getbootstrap.com/getting-started/options/ で説明されているように、ビルドでBootstrapのscss変数をカスタマイズします。

これどうやってするの？

angularangular-clitwitter-bootstrap-4ng-bootstrap
10
Dan

Angular CLIストーリーは https://github.com/angular/angular-cli/wiki/stories-include-bootstrap で答えを提供します。これを以下に要約します。これがng-bootstrapとどのように相互作用するかはまだわかりません。

プロジェクトを作成します。

ng new my-app --style=scss
cd my-app

インストールBootstrap 4：

npm install bootstrap@next --save

プロジェクトの構成

_variables.scssに空のファイルsrc/を作成します。これは、スタイルの変更が行われる場所です。

styles.scssに以下を追加します。

@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

テストプロジェクト

App.component.htmlを開き、次のマークアップを追加します。

<button class="btn btn-primary">Test Button</button>

アプリケーションを構成した状態で、ng serveを実行して、アプリケーションを開発モードで実行します。ブラウザで、アプリケーションlocalhost:4200に移動します。

bootstrapスタイル付きボタンが表示されることを確認します。変数が使用されていることを確認するには、_variables.scssを開き、以下を追加します。

$brand-primary: red;

ブラウザに戻って、フォントの色が変更されたことを確認します。

7
Dan

受け入れられた回答は機能しなくなります。あなたが私のようなら、あなたは新しいangularユーザーがあなたのプロジェクトにbootstrapを追加しようとし、ここでangular-cli wikiをフォローしようとしています： https ：//github.com/angular/angular-cli/wiki/stories-include-bootstrap （承認された回答に貼り付けられています）。

問題はここで説明されています： https://github.com/twbs/bootstrap/issues/23112

短いバージョン：テーマの色がネストされたオブジェクトに含まれるようになったため、$ brand-primaryのようなものは適用されなくなりました-変更する必要があります$ theme-colors。これは機能しますが、1つの変数のみを編集する場合でも、オブジェクト全体を置き換える必要があります。

$gray-100: #f8f9fa;
$gray-600: #868e96;
$gray-800: #343a40;

$red: #dc3545;
$yellow: #ffc107;
$green: #006600; // This is the only variable I wanted to change
$cyan: #17a2b8;

$theme-colors: (
  primary: $green,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800
);
9
Etherman

Scssをangular 5プロジェクトに含める方法を理解した後（このリンクを参照： Angular CLI でSassを使用））、次の手順を実行します。このブーストラップチュートリアルをより完全にするために： https://getbootstrap.com/docs/4.0/getting-started/theming/

0
hubert

ついにうまくいきました。 bootstrap 4.3.1をangular 7.2.15アプリに実装したかったのです。

既存のアプリにはデフォルトのスタイルモードがcssであるため、「 Angular-cli from css to scss 」を使用してscssに変換しました（スタイルモード）

次に、インターネットやこのページの多くの場所を参照します。次の手順は私のために働いた。 （@Ethermanと@Danに感謝します）

  1. Npmを使用してbootstrap
  2. テーマの色の変更と修正のためのファイル（たとえば、theme.scss）を作成します。@ Ethermanのヒントを参照してください。
  3. 次に、@ Danが言ったように、変更されたファイルをsrcフォルダーからインポートし、次にbootstrap scssファイルをstyles.scssファイルのnode_modulesからインポートします。
0
Abdeali Chandanwala

Angular CLIは、.angular-cli.json構成ファイルにstyles構成配列を提供します。ここでは、コンパイルするscssファイルへのパスをその一部として配置できます。プロジェクトを実行します。

その配列に書き込むカスタムbootstrap scssファイルへのパスを追加すると、アプリケーションのスタイルにコンパイルされます。

0
snorkpete