将 Bootstrap 3 自定义组件添加到 Yeoman Angular 项目

Question

所以上周我一直在搞乱 yeoman 和 angular，我已经能够将 bootstrap 和 ui-bootstrap 合并到我的 yeoman angular 项目中。但是，当我想添加一个自定义引导组件（如封面页 (http://getbootstrap.com/examples/cover/) 时，它需要一个名为 cover.css 的不同 css 文件。

我尝试将它链接到我的 main.html、index.html 甚至 @import 到我的 main.css 文件中，但是每当我“咕哝服务”时，它就会被压扁和缩小。这是因为 main.css 文件覆盖了 cover.css 吗？或者更好的问题是如何将 css 文件添加到 yeoman 项目中？

这可能是一个愚蠢的问题，但我们将不胜感激。

Answer 1

Yeoman 不直接处理 CSS 文件，据我了解，您必须执行链接 CSS 文件的部分，它将手动为您关闭。

关于 CSS 中的覆盖，假设相同的重要性，较高的特异性获胜，如果两个类具有相同的特异性水平，则通常最后一个获胜。在我的项目中，我只包含 bootstrap.css 并相信它包含其他所需的一切。

<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-sass/dist/css/bootstrap.css"/>

也许你需要包含具有模板的angularui项目（注意js文件名中的tpls）

<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>