Question

我配置了一个笨拙的任务（我正在使用现有项目）。我不知道在哪里可以找到特定的任务。我创建了一个“index.html”文件，并在每次编译和构建后添加到“dist”文件夹中。但是在index.html中我手动每次都要添加以下内容：

<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">

以及 -

    <base href="/">

对于AJS。

可能出现什么问题？

我不想编辑bower.json而是使用grunt任务进行编辑。那怎么办呢？

我有以下内容：

var buildConfig = module.exports = {

    // Wiredep options
     wiredepOptions: {

    //
    // devDependencies: true, // <-- injects bower devDependencies
    //
    // exclude: [             // <-- List of patterns to exclude
    //     
    //     /bootstrap\.js/
    // ]

    "overrides": {
      "bootstrap": {
        "main": [
          "dist/css/bootstrap.css"
           ]
      }
},

这给了我错误。我该如何解决？

Answer 1

这是因为Bootstrap的bower.json中的main对象提到了对less文件的引用而不是css

  "main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js"
  ],

Wiredep是负责注入这些资产的繁琐任务，因此它不知道CSS文件在哪里。您可以通过在gruntfile.js中的wiredep任务中提供覆盖来实现，如下所示：

wiredep: {
    ...,
    overrides: {
      'bootstrap': {
        'main': [
          'dist/js/bootstrap.js',
          'dist/css/bootstrap.css'    // Note this
        ]
      }
    }
  }
},

再次运行grunt wiredep会按预期将CSS文件注入HTML。

注意：除非您的HTML具有此HTML评论

，否则无效

<!-- bower:css -->
  The styles will be injected here
<!-- endbower -->

Answer 2

我无法通过编辑Gruntfile解决它，但在bower.json中添加了它：

  "overrides": {
  "bootstrap": {
     "main": [
       "dist/css/bootstrap.css"
      ]
     }

Bootstrap.css没有被添加到dist.html中的index.html

2 个答案: