Как переопределить стили загрузки twitter в angular2 с помощью ng2-bootstrap

Я использую ng2-bootstrap из valor-software. Когда я запускаю веб-сайт с помощью ng serve, страница, которая обслуживается, имеет следующие теги стиля в заголовке:

<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. Я хочу переопределить цвет фона на теге body. Я могу изменить загрузочный.css-файл в папке node-modules, но это не кажется правильным решение.

изменение стиля.css-файл ничего не делает. Даже изменение индекса.html-файл, похоже, ничего не делает. Стили, похоже, переопределены.

любая помощь будет наиболее высоко.

спасибо

9
angular css ng2-bootstrap

4 ответов

Я нашел решение после некоторых раскопок.

на угловой-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 файл

18

возможно, они изменили некоторые вещи в обновлениях с этого поста в декабре. Но мне не нужно было вносить какие-либо изменения в мой угловой cli.файл json, но отметить единственный стиль, указанный там, был по умолчанию стили.в CSS это в корне src. Но то, что в конечном итоге работало для меня, просто добавляло некоторые @import операторы для моих пользовательских файлов css в bootstrap.css-файл и убедитесь, что таблица стилей была указана в моем указателе.формат html.

Мои настройки @ angular 2.4.7, узел-sass 4.5, узел 6.9.5, в Bootstrap 4, ngBootstrap 1.0.0-Альфа

0

последняя версия разработки ng2-bootstrap включает инструкции, которые я предоставил о том, как использовать bootstrap 4 с @angular/cli.
Основная часть инструкций должна по-прежнему применяться к bootstrap 3 без особых проблем. Главный интерес для вас заключается в том, что если вы используете SASS и определяете переменную.файл scss, то любые переопределения, которые вам требуются, могут быть помещены в этот файл.
Если вы хотите пойти этим путем, вам придется использовать версию Sass bootstrap (github репозиторий для версии SASS также показывает подробные сведения о том, как переопределять переменные).

0

Если вы используете sass, что я советую вам сделать, то вы можете поместить свои переопределения после импорта bootstrap в свой стили.scss. Например

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

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