如何制作 yo angular load bootstrap 主题 css答案

【问题标题】：how to make yo angular load bootstrap theme css如何制作 yo angular load bootstrap 主题 css
【发布时间】：2015-02-23 17:29:33
【问题描述】：

yo angular 安装引导文件一切正常。 index.html 文件现在看起来像这样：

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

这不包括bootstrap.theme.css 文件。

推荐的添加方法是什么？我要手动进去添加吗？

【问题讨论】：

标签： css angularjs twitter-bootstrap yeoman yo

【解决方案1】：

如果它在您的系统上本地可用（例如，在 bower_components/ 中），请手动将其添加到其他 .css 包含下方。

如果该文件在本地不可用，我会将其添加到 的正上方，否则它可能会破坏您的grunt build 和/或grunt serve，因为bower 试图缩小文件。

谷歌字体导入也是如此，将它们放在 上方，否则bower 将尝试缩小它（在Gruntfile.js 中的htmlmin 选项下）。

Here您可以阅读有关该主题的更多信息。

【讨论】：

【解决方案2】：

正确的做法是重写 bower.json 文件以加载引导依赖项，然后运行 grunt wiredep

bower.json 看起来像这样：

{
  "name": "frontend",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "json3": "^3.3.0",
    "es5-shim": "^4.0.0",
    "bootstrap": "^3.2.0",
    "angular-cookies": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-local-storage": "~0.1.5",
    "raty": "~2.7.0",
    "kineticjs": "~5.1.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.3.0",
    "angular-scenario": "~1.3.0"
  },
  "appPath": "app",
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/css/bootstrap-theme.css",
        "dist/js/bootstrap.js",
        "dist/fonts/glyphicons-halflings-regular.eot",
        "dist/fonts/glyphicons-halflings-regular.svg",
        "dist/fonts/glyphicons-halflings-regular.ttf",
        "dist/fonts/glyphicons-halflings-regular.woff"
      ]        
    }
  }
}

来源：https://github.com/yeoman/generator-angular/issues/965#issuecomment-68548259

【讨论】：

【解决方案3】：

执行以下操作

bower install bootstrap-css --save

【讨论】：