在 Angular 应用程序中覆盖引导程序答案

【问题标题】：Override Boostrap in Angular App在 Angular 应用程序中覆盖引导程序
【发布时间】：2018-01-23 13:18:06
【问题描述】：

我正在尝试在我的 Angular 应用程序中覆盖默认的 Twitter Bootstrap 样式。我正在使用 AngularJS v1.6.8。

我的文件结构如下所示：

*src *app *public *styles *global-styles.css *index.html

我已经在 global-styles.css 中放置了我想用来覆盖 Twitter Bootstrap 样式的 css。

目前，我使用“bootstrap-css-only”来利用 Twitter Bootstrap 提供的默认样式。

我将 global-styles.css 添加到我的 index.html 中，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1"> <base href="/"> <link rel="stylesheet" href="/styles/global-styles.css">

我的自定义样式没有显示在我的 index.html 和/或任何组件上。有任何想法吗？

谢谢。

【问题讨论】：

标签： css angularjs twitter-bootstrap

【解决方案1】：

无论您要覆盖哪些新的 CSS 类，都必须将其保存在 style.css 文件中。我将工作并在 CSS 类属性中添加 !important。 .

【讨论】：

我不想在我的 CSS 中使用 !important。在这种情况下，我宁愿通过加载文件的顺序放置具有我的自定义 CSS 覆盖基线 Twitter Bootstrap CSS 的 CSS 文件。我无法弄清楚，因为基线 Bootstrap CSS 来自 bootstrap-css-only。

【解决方案2】：

这是因为 base href 设置为 "/" 并且无法完全加载您的 css。您可以删除基本标签并使用相对路径：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/global-styles.css">

或设置绝对路径：

<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<link rel="stylesheet" href="ROOT_PATH/src/public/styles/global-styles.css">

注意：您需要替换 ROOT_PATH

【讨论】：