将波本威士忌/波旁威士忌整齐地与Yeoman一起使用时没有错误

Question

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

我想用波旁/波旁威士忌整洁代替指南针，这是我遇到的问题。 我遵循了本教程，但是当我运行“ 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的文章还提供了在main.scss包含Bourbon和Neat样式的不正确说明，因为main.scss @import 'bourbon'和main.scss @import 'neat'调用不会在正确的目录中查找。 我敢肯定有解决此问题的更优雅的方法，但是我的解决方案只是提供绝对引用：

2a。 使用@import '../bower_components/bourbon/dist/bourbon';导入波旁@import '../bower_components/bourbon/dist/bourbon';
2b。 使用@import '../bower_components/neat/app/assets/stylesheets/neat'; neat/ @import '../bower_components/neat/app/assets/stylesheets/neat';导入整洁@import '../bower_components/neat/app/assets/stylesheets/neat';

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

作为参考，在进行以下更改后，我已经上传了完整的Gruntfile： gist.github.com/colepeters/11155980

希望这可以帮助！

（顺便说一句，我将尝试针对这些问题对Thoughtbot进行ping操作，以便可以更新本文。）

Answer 2

我今天正在处理相同的问题。 我要感谢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教程很棒，但是显然所有教程都不是最新的。

Answer 3

一切变化太快； 问题在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

Answer 4

看起来回购已更改。 这为我解决了：

在app / styles / main.css中

@import "../../bower_components/bourbon/app/assets/stylesheets/bourbon";
@import "../../bower_components/neat/app/assets/stylesheets/neat";

Answer 5

这是一种解决方案，不需要重新路由Gruntfile.js或main.scss中的bourbon /整洁.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}']

我只编辑了文件任务，没有别的什么，那是在51行左右。进行此编辑后，无论在哪个工作目录中编辑/保存样式，都可以自动上传grunt。您将看到我已经添加了3个目录的通配符选择器。 如果可能，我一般不会比这更深入，但这取决于项目/个人。

然后在样式表中，我执行了以下操作：

• 在main.scss离开波旁/整齐@import规则，因为它们没有变化
• 在main.scss中 - 在波旁威士忌/整洁的进口之后-添加： @import'user @import 'user/user-main';
• 从main.scss中删除了所有样式声明，并将其放入user/user-main.scss
• 在user/user-main.scss的底部添加了： @import '02/user-secondary';

这个混蛋应该是直观的，并且结构仅是一个用例。

这样，我清理了所有样式声明的main.scss ，并且此文件现在仅充当所有样式导入的根。 从那里开始，项目分解为用户特定的目录/样式表，这就是我想要的。

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

作为最后的调整，我想在outer-container mixin上添加一些填充，该填充将应用于body以阻止一切都平移到视口边缘， 如此处所示 。 所以在user/02/user-secondary.scss我添加了@include pad(0 10px); 身体 。 这有点怪异，因为它实际上减小了容器的宽度，但确实在视口侧应用了一些空间。

希望这可以帮助！