javascript - 在 Yeoman 中使用 bourbon/bourbon neat 没有错误

Question

我刚开始使用 Yeoman，到目前为止效果很好。

我想用 Bourbon/bourbon neat 替换 compass，但我遇到了问题。我关注了this tutorial但是当我运行“grunt serve”时，我遇到了问题。它似乎没有将我的 scss 编译成 css 文件。我检查了目录，那里没有文件。

我试着让 thoughtbot 的人帮忙，但还没有回应。

任何帮助都会很棒。

这是我的 gruntfile.js 供引用。

https://dl.dropboxusercontent.com/u/9830212/Gruntfile.js

Answer 1

我刚刚花了最后一个小时试图自己解决这个问题——希望以下修复对你也有用。

首先，我假设您遇到的错误是:

Warning: An error occurred while processing a template (Cannot read property 'app' of undefined).

发生这种情况的原因是因为 generator-webapp 的 Gruntfile已经(我想最近)从 yeoman 更新了元素变量至 config — 这意味着 yeoman.app方法不再有效。所以:

<强>1。更改 <%= yeoman.app %> 的所有实例至 <%= config.app %>

这将解决 CL 错误。然而，Thoughtbot's article还提供了关于在您的 main.scss 中包含 Bourbon 和 Neat 样式的不准确说明, 作为 @import 'bourbon'和 @import 'neat'调用不会在正确的目录中查找。我确信有更优雅的方法来解决这个问题，但我的解决方案只是提供绝对引用:

2a。使用 @import '../bower_components/bourbon/dist/bourbon'; 导入波旁威士忌
<强>2b。使用 @import '../bower_components/neat/app/assets/stylesheets/neat'; 导入 Neat

保存这些更改后，确保停止 grunt serve如果它当前正在运行。当你再次启动它时，你应该没有错误并且有一个正确构建的 main.css文件。

作为引用，我在进行这些更改后上传了完整的 Gruntfile:gist.github.com/colepeters/11155980

希望这对您有所帮助!

(顺便说一句，我会尝试用这些问题对 Thoughtbot 执行 ping 操作，以便更新文章。)