0

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

我想用波旁威士忌/波旁威士忌代替罗盘，这是我遇到问题的地方。我按照本教程进行操作，但是当我运行“grunt serve”时出现问题。它似乎没有将我的 scss 编译成 css 文件。我检查了目录，那里没有文件。

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

任何帮助都会很棒。

这是我的 gruntfile.js 供参考。

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

4

5 回答 5

3

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

首先，我假设你得到的错误是：

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

发生这种情况的原因是因为 Gruntfile forgenerator-webapp已经（我想最近）将项目变量从yeomanto更新了config- 这意味着该yeoman.app方法不再有效。所以：

1.将所有实例更改<%= yeoman.app %>为<%= config.app %>

这将解决 CL 错误。但是，Thoughtbot 的文章还提供了不准确的说明，以在您的 . 中包含 Bourbon 和 Neat 样式main.scss，因为@import 'bourbon'and@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

希望这可以帮助！

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

于 2014-04-21T20:49:28.043 回答
0

一切都变化得太快；这里的问题在于 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

于 2014-07-18T14:53:37.873 回答
0

我今天正在解决同样的问题。我要感谢 Cole 的出色回答，解决了我的第一个问题<%= config.app %>。这是手头主题的延续。

我花了一些时间研究 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 教程很棒，但很明显所有教程都不是最新的。

于 2014-06-03T02:19:14.540 回答
0

看起来回购已经改变了。这对我有用：

在app/styles/main.css

@import "../../bower_components/bourbon/app/assets/stylesheets/bourbon";
@import "../../bower_components/neat/app/assets/stylesheets/neat";
于 2015-04-13T12:05:28.533 回答
0

这是一个解决方案，它不需要对 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 个目录深度的通配符选择器。如果可能，我通常不会比这更深入，但这取决于项目/个人。

然后在样式表中我做了以下事情：

  • 在 main.scss 中保留了 bourbon/neat @import 规则，没有变化
  • 在main.scss -在bourbon/neat 进口之后 - 添加：@import 'user/user-main';
  • 从main.scss中删除所有样式声明并将它们放在里面user/user-main.scss
  • 在底部user/user-main.scss添加：@import '02/user-secondary';

这个 sass 应该是直观的，并且结构只是用于一个用例。

有了这个，我清理了所有样式声明的main.scss，这个文件现在只用作所有样式导入的根。从那里项目被分解成用户特定的目录/样式表，这正是我想要的。

然后只需运行grunt build并grunt serve可以对/user/样式表进行编辑，整个事情就会自动加载而不会出现错误。

作为最后的调整，我想在outer-containermixin 中添加一些填充，body以阻止所有内容都刷新到视口边缘，如此处所述。所以在user/02/user-secondary.scss我添加@include pad(0 10px);到body。这有点 hacky，因为它实际上减小了容器的宽度，但它确实在视口侧应用了一些空间。

希望这可以帮助！

于 2015-07-02T19:40:16.803 回答