Question

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

我想用波旁威士忌/波旁威士忌来代替罗盘，这是我遇到问题的地方。我跟着this tutorial，但是当我跑步＆＃34; grunt serve＆＃34;我遇到了问题。它似乎没有将我的scss编译成css文件。我检查了目录，那里没有文件。

我试着让思想机器人帮忙，但还没有回应。

任何帮助都会很棒。

这是我的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错误。但是，由于main.scss和@import 'bourbon'调用不会在正确的目录中查找，Thoughtbot's article也会在@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，以便更新文章。）

Answer 2

我今天正在研究同样的问题。我要感谢Cole解决我的第一个问题＆lt;％= config.app％＆gt; 的好答案。这是手头主题的延续。

我花了一些时间玩Gruntfile.js，并找到了一种简化样式表中导入的方法。 环顾38行左右。

options: {
    loadPath: [
    '/Users/username/project/bower_components/bourbon/dist',
    '/Users/username/project/bower_components/neat/app/assets/stylesheets'
     ]
}

如果你让它们成为本地的那么它就可以了。这允许你使用@import＆＃39; bourbon＆＃39 ;;和@import＆＃34; neat＆＃39;;

这不是一个优雅的解决方案，但我也不是。我只是希望它有所帮助。我将继续寻找更漂亮的解决方案。

toughtbot教程很棒，但很明显所有教程都不是最新的。

Answer 3

一切都在变化太快;这里的问题在loadPaths上重新开始。你必须检查文件的正确路径，并根据它进行调整。

@ TrueRed72答案很清楚设置正确的加载路径，因此他可以从main.scss导入文件而不需要长路径规范。在我的情况下，我仍在使用<%= yeoman.app %>，但我的bower_components文件夹不在project_path / app /上，而是在project_path / root上。所以我的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中的波旁威士忌/整齐.scss路径进行任何重新路由，只需要修改 watch .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行或附近。进行此编辑可以在编辑/保存样式时自动上传，无论你在哪个目录中工作。您将看到我为3个目录深度添加了通配符选择器。如果可能的话，我通常不会深入到这个项目/个人那里。

然后在样式表中，我做了以下内容：

离开了波本威士忌/整齐的@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-container mixin中添加一些填充，这些填充应用于body以阻止一切与视口边缘齐平，as posted here。所以在user/02/user-secondary.scss我添加了@include pad(0 10px);到 body 。它有点hacky，因为它实际上减少了容器的宽度，但它确实在视口侧应用了一些空间。

希望这有帮助！

使用波旁威士忌/波本威士忌与Yeoman整齐无误

5 个答案: