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

Изменение файла style.css ничего не дает. Даже изменение файла index.html ничего не дает. Кажется, что стили переопределены.

Любая помощь будет принята с благодарностью.

спасибо


angular css ng2-bootstrap
person Peter Munnings    schedule 12.12.2016    source источник

Ответы (5)


arrow_upward
25
arrow_downward

Я нашел решение после некоторого копания.

В файле 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

person Peter Munnings    schedule 12.12.2016
comment
Потрясающий! вам придется перезапустить сервер, так как angular-cli не ищет изменений в angular.cli.json, поэтому вам придется компилировать и запускать вручную. - person Mahin Khan; 13.02.2017
comment
Это все еще переопределяет мой локальный сервер - person Sidharth Chhawchharia; 26.03.2020

arrow_upward
1
arrow_downward

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

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

// START bootstrap override
.card {
  margin-bottom: 0.5rem;
}
.card-body {
  padding: 1rem;
}
person ama    schedule 16.09.2017

arrow_upward
0
arrow_downward

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

Моя настройка: @angular 2.4.7, node-sass 4.5, node 6.9.5, bootstrap 4, ngBootstrap 1.0.0-alpha

person BashC    schedule 24.02.2017

arrow_upward
0
arrow_downward

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

person websterd    schedule 17.03.2017

arrow_upward
0
arrow_downward

Проверьте нижнюю часть файла src/styles.sass для импорта начальной загрузки следующим образом:

/* Importing Bootstrap SCSS file. */
@import '~bootstrap/scss/bootstrap'

Перемещение этой строки в начало файла решило мою проблему.

person user43284    schedule 31.05.2021