在Angular App中覆盖Boostrap

Question

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

我的文件结构如下所示：

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

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

目前，我正在使用＆＃34; bootstrap-css-only＆＃34;为了利用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和/或任何组件上。有任何想法吗？

谢谢。

Answer 1

无论您想要覆盖哪些CSS类，都必须保留在style.css文件中。我将工作，只是在CSS类属性中添加！important。

Answer 2

这是因为base href设置为＆＃34; /＆＃34;并且无法完全加载您的CSS。 您可以删除基本标记并使用相对路径：

eval

或设置绝对路径：

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

注意：您需要替换ROOT_PATH