0

我是 Yeoman 和 Grunt 的新手，在执行“grunt serve:dist”之后，我对样式表有了很大的了解。

它改变了字体宽度，在标题中添加了一些填充，实际上完全破坏了一个表格，我不知道从哪里开始调试，但我相信它确实找到了 CSS，因为字体样式确实改变了，它正在读取JS，我放了一些 console.log() 来查看它是否正常工作，但也有一些例外情况，例如（Chrome 控制台）：

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/styles/fonts/slick.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/styles/ajax-loader.gif
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/styles/fonts/slick.ttf
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/styles/fonts/slick.svg#slick

任何想法？

4

4 回答 4

1

我也遇到过完全相同的事情。我正在使用 gulp 和 bower 给我 Slick Carousel 插件。我相信 gulp 和 grunt 在很多方面是相似的。不幸的是，是插件调用了这些文件并且它是 404'ing 因为它的相对 url 不再指向正确的位置，因为 gulp/grunt 如何编译它们并将它们注入到 dist/.

这是我解决它的方法。我只从 slick.scss 复制并粘贴了这些 URLS 到正在调用的 bower 组件中，并创建了一个新文件并将其保存在我的 src/ 文件夹中。我将所有这些文件上传到主机。我将这些相对 URL 更改为绝对 URL（以指向托管文件），以便覆盖进行调用的相对 URL。

让我知道这解决了你的问题。我希望这个能帮上忙！

于 2015-11-20T16:09:20.173 回答
0

似乎 grunt 在最终版本中构建任何 CSS，即使没有使用。我有一个我从不导入的 main.scss 文件，但正是这种文件样式与其他文件混淆了。

于 2014-08-26T07:30:47.490 回答
0

好的，所以我无法添加评论，因为我的声誉还不够高。所以我想问你是否使用了 angular-fullstack 生成器。当我使用这个生成器时，我遇到了类似的错误。我永远无法确定确切的原因......除了它必须处理<!-- injector:js -->我花了几个小时调查它。基本上，为了一个快速的解决方案，我从默认构建中重新复制了 index.html 页面，然后我确保永远不会触及 Google 分析行以下的任何内容。出于某种原因，当我什至更改制表符或间距时，我开始收到此错误。问题是您的脚本文件没有被注入到缩小和 ulgified 的 app.js dist 文件中。

当然，在您的示例中，看起来问题并不是您的 js 文件，而是其他一些文件没有被正确复制。我即将发布一个处理类似问题的问题，除了它处理的是 bower_components，所以我稍后会链接它以防它对你有帮助。

于 2014-10-05T18:33:20.120 回答
0

我认为您应该检查复制选项所在的 Grunt 文件，您可以看到在 grunt serve:dist 命令中复制的组件，请参见 src:[...

 copy:
        dist:
            files: [
                expand: true
                dot: true
                cwd: "<%= yeoman.app %>"
                dest: "<%= yeoman.dist %>"
                src: [
                    "favicon.ico"
                    # bower components that has image, font dependencies
                    "bower_components/font-awesome/css/*"
                    "bower_components/font-awesome/fonts/*"
                    "bower_components/weather-icons/css/*"
                    "bower_components/weather-icons/fonts/*"
                    "bower_components/weather-icons/font/*"

                    "fonts/**/*"
                    "i18n/**/*"
                    "images/**/*"
                    # "styles/bootstrap/**/*"
                    "styles/fonts/**/*"
                    "styles/img/**/*"
                    "styles/ui/images/*"
                    "views/**/*"
                ]
            ,
                expand: true
                cwd: ".tmp"
                dest: "<%= yeoman.dist %>"
                src: ["styles/**", "assets/**"]
            ,
                expand: true
                cwd: ".tmp/images"
                dest: "<%= yeoman.dist %>/images"
                src: ["generated/*"]
            ]

确保您的 dist 包中有组件的副本

于 2015-02-25T14:24:04.347 回答