bower 未将所有 bower_component css 文件添加到索引答案

【问题标题】：bower not adding all bower_component css files to indexbower 未将所有 bower_component css 文件添加到索引
【发布时间】：2015-11-06 04:58:39
【问题描述】：

所以我有这个Yeoman angular fullstack MEAN 项目，我将material design icons 添加到我的bower_components。但是，这不会像我的所有其他 .css 文件一样自动添加到我的 index.html 页面。

有没有办法实现这一点，因为在我开始我的项目时，我必须手动添加对.css 文件的引用。

我的 index.html 看起来像这样

<head>
    ...

    <!-- build:css(client) app/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css({.tmp,client}) app/app.css -->
    <link rel="stylesheet" href="app/app.css">
    <!-- injector:css -->
    <link rel="stylesheet" href="app/account/login/login.css">
    <link rel="stylesheet" href="app/admin/admin.css">
    <link rel="stylesheet" href="app/app.css">
    <link rel="stylesheet" href="app/impression/impression.css">
    <link rel="stylesheet" href="app/information/information.css">
    <link rel="stylesheet" href="app/main/main.css">
    <link rel="stylesheet" href="app/shop/shop.css">
    <link rel="stylesheet" href="app/turnament/turnament.css">
    <link rel="stylesheet" href="components/modal/modal.css">
    <!-- endinjector -->
    <!-- endbuild -->
</head>

我希望它看起来像这样

<head>
    ...

    <!-- build:css(client) app/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="bower_components/mdi/css/materialdesignicons.css" />
    <!-- endbower -->

    ...
</head>

编辑

bower_component/mdi/bower.json

{
    "name": "mdi",
    "version": "1.1.70",
    "main": [
        "css/materialdesignicons.css",
        "fonts/*",
        "css/*",
        "scss/*",
        "package.json",
        "preview.html"
    ],
    "homepage": "http://materialdesignicons.com",
    "authors": [
        { "name": "Austin Andrews", "homepage": "http://templarian.com" },
        { "name": "Google", "homepage": "http://www.google.com/design" }
    ],
    "license": ["OFL-1.1", "MIT"],
    "ignore": [
        "*.md",
        "*.json"
    ],
    "keywords": [
        "material",
        "design",
        "icons",
        "webfont"
    ]
}

/bower.json

{
    "name": "lunorth",
    "version": "0.0.0",
    "dependencies": {
        "angular": ">=1.2.*",
        "json3": "~3.3.1",
        "es5-shim": "~3.0.1",
        "jquery": "~1.11.0",
        "bootstrap": "~3.1.1",
        "angular-resource": ">=1.2.*",
        "angular-cookies": ">=1.2.*",
        "angular-sanitize": ">=1.2.*",
        "angular-route": ">=1.2.*",
        "angular-bootstrap": "~0.11.0",
        "font-awesome": ">=4.1.0",
        "lodash": "~2.4.1",
        "angular-socket-io": "~0.6.0",
        "angular-animate": "~1.4.2"
    },
    "devDependencies": {
        "angular-mocks": ">=1.2.*",
        "angular-scenario": ">=1.2.*"
    }
}

【问题讨论】：

检查缺少的 bower 包 bower.json 文件，如果没有列出将由wiredep 添加的文件或文件数组的“main”属性，有时它们不会被添加
@tenderloin：我刚刚从我的 mdi 文件夹中添加了 bower.json 文件，它有一个 main。是你提到的那个吗？
是的，我唯一能想到的另一件事是，当您通过 Bower 安装软件包时，您没有使用“--save”将其保存为依赖项。你能检查你的项目 bower.json 来确认吗？
我认为是你的问题，添加“mdi”和依赖项下的版本并重建你的项目
这是个好消息 :) 我会发布答案

标签： html css gruntjs bower yeoman

【解决方案1】：

您的项目 bower.json 文件的依赖项列表中似乎缺少 Material Design 图标。

如果您将名称和版本添加到依赖项中，它将解决您的问题。

"dependencies": {
        "mdi": "1.1.70",
        ...,
        ...
}

如果您通过命令行安装了该软件包，您可以使用--save 将其添加到您的项目依赖项中。

wiredep 的另一个常见问题是缺少包的 bower.json 文件缺少 'main' 属性。

【讨论】：