在 Angular 应用程序中覆盖 Boostrap

Question

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

我的文件结构如下所示：

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

我已经放置了我想用来覆盖全局样式的 Twitter Bootstrap 样式的 css.css。

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

我将我的全局样式.css添加到我的索引中.html如下所示：

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

我的

自定义样式不会显示在我的索引.html和/或任何组件上。有什么想法吗？

谢谢。

Answer 1

这是因为基本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

Answer 2

无论你想要

覆盖哪些新的CSS类，你必须保留在style.css文件中。我将工作，只是在 CSS 类属性中添加 ！important。.