web-dev-qa-db-ja.com

Twitterをオーバーライドする方法bootstrap Angular2のスタイルをng2-bootstrapで

Valor-softwareのng2-bootstrapを使用しています。 ng serveを使用してWebサイトを開始すると、配信されるページのヘッダーに次のスタイルタグがあります。

<style type="text/css">/* You can add global styles to this file, and also import other style files */
</style>

<style type="text/css">/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}

それは明らかに、node_modules/bootstrap/dist/css/bootstrap.cssファイルから2番目のインラインスタイルを引き出しています。 bodyタグの背景色を上書きしたい。 node-modulesフォルダーのbootstrap.cssファイルを変更できますが、これは適切な解決策のようには思えません。

Style.cssファイルを変更しても何も起こりません。 index.htmlファイルを変更しても、何も実行されないようです。スタイルが上書きされているようです。

任意の助けをいただければ幸いです。

ありがとう

cssangularng2-bootstrap
13
Peter Munnings

少し掘り下げた結果、解決策が見つかりました。

angular-cli.jsonファイルには次が含まれていました：

"apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.json",
  "prefix": "app",
  "mobile": false,
  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [],
  "environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}

]、

スタイルの順番を入れ替えるだけで

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],

オーバーライドをsrc/styles.cssファイルに追加します

23
Peter Munnings

Sassを使用している場合は、推奨されますが、bootstrap in yourstyles.scssファイル。例：

// version 4
@import 'variables';
@import '~bootstrap/scss/bootstrap';

// START bootstrap override
.card {
  margin-bottom: 0.5rem;
}
.card-body {
  padding: 1rem;
}
1
Adrian

12月のこの投稿以降、アップデートでいくつか変更された可能性があります。しかし、angular-cli.jsonファイルに変更を加える必要はありませんでしたが、リストされている唯一のスタイルがデフォルトstyles.cssルートにありますsrcフォルダにあります。しかし、私にとってうまくいったのは、カスタムcssファイルの@ importステートメントをbootstrap.cssファイルに追加するだけでしたスタイルシートがindex.htmlで参照されていることを確認します。

私の設定は@angular 2.4.7、node-sass 4.5、node 6.9.5、bootstrap 4、ngBootstrap 1.0.0-alpha

0
BashC

Ng2-bootstrapの最新の開発リリースには、@ angular/cliでbootstrap 4を使用する方法についての説明が含まれています。
説明の主要部分は、それほど問題なくbootstrap 3にも適用できます。SASSを使用して変数を定義する場合の主な関心事は、 scssファイルを使用すると、必要なオーバーライドをそのファイルに配置できます。
このようにしたい場合は、bootstrapのSASSバージョンを使用する必要があります（SASSバージョンのgithubリポジトリには、変数をオーバーライドする方法の詳細も表示されます）。

0
websterd