我刚开始使用 Yeoman，到目前为止效果很好。
我想用波旁威士忌/纯波旁威士忌替换指南针，这是我遇到问题的地方。我关注了this tutorial，但是当我运行“grunt serve”时，我遇到了问题。它似乎没有将我的 scss 编译成 css 文件。我检查了目录，那里没有文件。
我试着让thoughtbot 的人帮忙，但还没有回应。
任何帮助都会很棒。
这是我的 gruntfile.js 供参考。
【问题讨论】：
标签： javascript css gruntjs yeoman bourbon
我刚刚花了最后一个小时试图自己解决这个问题 - 希望以下修复也对您有用。
首先，我假设您遇到的错误是：
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';导入整洁
保存这些更改后，请确保停止 grunt serve（如果它当前正在运行）。当您再次启动它时，您应该没有错误并且有一个正确构建的main.css 文件。
作为参考，我在进行这些更改后上传了完整的 Gruntfile：gist.github.com/colepeters/11155980
希望这会有所帮助！
（顺便说一句，我会尝试用这些问题 ping Thoughtbot，以便更新文章。）
【讨论】：
我今天也在处理同样的问题。我要感谢 Cole 的出色回答解决了我的第一个问题 。这是手头主题的延续。
我花了一些时间研究 Gruntfile.js 并找到了一种方法来简化样式表中的导入。 看看第 38 行左右。
options: {
loadPath: [
'/Users/username/project/bower_components/bourbon/dist',
'/Users/username/project/bower_components/neat/app/assets/stylesheets'
]
}
如果您将它们设为本地，则它可以工作。这允许您使用 @import 'bourbon';和@import“整洁”；
这不是一个优雅的解决方案，但我也不是。我只是希望它有所帮助。我会继续寻找更漂亮的解决方案。
toughtbot 教程很棒，但很明显并非所有教程都是最新的。
【讨论】：
一切都变化得太快了；这里的问题在于 loadPaths。您必须检查哪个是正确的文件路径并相应地进行调整。
@TrueRed72 的回答很清楚设置正确的加载路径，因此他可以从 main.scss 导入文件而无需长路径规范。就我而言，我仍在使用<%= yeoman.app %>，但我的 bower_components 文件夹不在 project_path/app/ 上，而是在 project_path/ 根目录上。所以我的 loadPath 结束了：
loadPath: [
'<%= yeoman.app %>/../bower_components/bourbon/dist/',
'<%= yeoman.app %>/../bower_components/neat/app/assets/stylesheets/'
]
所以...诀窍是：查看 bower_components 文件夹中的真实文件路径并相应地更新 Gruntfile.js 中的 loadPath
【讨论】：
看起来回购已经改变了。这对我有用：
在 app/styles/main.css
@import "../../bower_components/bourbon/app/assets/stylesheets/bourbon";
@import "../../bower_components/neat/app/assets/stylesheets/neat";
【讨论】：
这是一个解决方案，它不需要对 Gruntfile.js 或 main.scss 中的波旁威士忌/整洁的 .scss 路径进行任何重新路由，只需对 . scss 文件。这一切都是在出现与此处其他帖子类似的错误之后发生的。
我想将演示样式拆分为单独的文件，以增强 ./app/sass/main.scss 并使整个内容更加模块化和用户个性化。
首先设置以下内容：./app/sass/user/user-main.scss。
其次设置如下：./app/sass/user/02/user-secondary.scss
然后在 Gruntfile.js 中编辑 grunt.initConfig > watch > sass > files 以读取如下：
files: ['<%= config.app %>/sass/**/**/**/{,*/}*.{scss,sass}']
我只编辑了 files 任务，没有其他内容，并且在第 51 行或附近。进行此编辑允许 grunt 在您工作的任何目录中编辑/保存样式时自动上传. 你会看到我已经为 3 个目录深度添加了通配符选择器。如果 poss，我通常不会比这更深入，但这取决于项目/个人。
然后在样式表中我做了以下操作：
@import 'user/user-main';
user/user-main.scss
user/user-main.scss 底部添加：@import '02/user-secondary';
这个 sass 应该是直观的，其结构仅用于一个用例。
我已经清理了所有样式声明的 main.scss，这个文件现在只作为所有样式导入的根。从那里项目被分解成用户特定的目录/样式表，这正是我想要的。
然后只需运行 grunt build 和 grunt serve 即可对 /user/ 样式表进行编辑，整个内容会自动加载而不会出现错误。
作为最后的调整，我想为outer-container mixin 添加一些填充，该填充应用于body，以阻止所有内容与视口边缘齐平，as posted here。所以在user/02/user-secondary.scss 中，我将@include pad(0 10px); 添加到body。这有点 hacky，因为它实际上减小了容器的宽度，但它确实在视口两侧应用了一些空间。
希望这会有所帮助！
【讨论】：