Upgrade Issues

[mramitpatel]

After upgrading to the newest playbook, my build is sucking. I'm missing a lot of random stuff and throwing issues when i run gulp. Namely this: (Line 25: Undefined mixin 'shift'.). My previous build had a mixins folder. Any ideas on what the upgrade method should be? I cloned my directory, ran playbook and copied over sass, etc however the sass files/directories are different.

[bval]

@mramitpatel It sounds like you're missing the neat sass library on which playbook depends. In your application.scss file what does your @import statement look like for neat? The includes were changed during the grunt->gulp migration https://github.com/centresource/generator-playbook/commit/bff461ccce5d25e186f9be337e6d43ac0ab4e70b#diff-d49ad49517d55925fe4903f6c1f53724

[dcalhoun]

Lots of things changed in the v2.0.0 release of Playbook.

• Replaced Grunt with Gulp
• Removed opinionated, non-Bourbon/Neat/Bitters Sass files (e.g. – the mixins directory)
• Updated many dependencies (e.g. – Bourbon, Neat)

The "Undefined mixin 'shift'" is no doubt related to missing the Neat library when Sass compiles. As Brandon said, be sure to verify the Neat is included properly. The method to include Neat changed as Playbook is now using node-neat.

[mramitpatel]

Application.scss looks like it has the necessary includes: @import 'bourbon'; @import 'base/base'; @import 'neat'; @import 'global';

Gulpfile.js does have the required include for node-neat as well...

Safe to assume the upgrade path also requires rewriting statements that include shift and span-columns? The current document still has shift and other functions are apparently undefined in my build.

[dcalhoun]

• :+1: Your Sass imports do look correct.
• :+1: Sounds like your Gulp file is correctly importing node-neat in the styles task. Although I don't know for sure without seeing the file itself in a [Gist](Safe to assume the upgrade path also requires rewriting statements that include shift and span-columns? The current document still has shift and other functions are apparently undefined.).

I'm not sure what you mean by this...

Safe to assume the upgrade path also requires rewriting statements that include shift and span-columns? The current document still has shift and other functions are apparently undefined.

If you are having issues with outdated mixins, it might be good to refer to the Bourbon and Neat documentation for whichever version you are using.

[mramitpatel]

Thanks for the comments guys. Here is a little more information:

Gist of my gulpfile: https://gist.github.com/mramitpatel/0b16932255347bd5aa55

I believe things are being important correctly since, I don't have problems with other mixins and css, just sporadic ones such as the one below.

Error: error /Users/amit/sites/new-giant/app/styles/component/nav.scss (Line 25: Undefined mixin 'shift'.) Amits-MBP:new-giant amit$ WARN: Unresolved specs during Gem::Specification.reset:

This is my css referring to shift: .primary-nav{ @include shift(6); } Neat documentation shows this as a valid mixin and statement. Still not sure why it's showing up as undefined. However... my application.scss lists this: @import 'bourbon'; @import 'base/base'; @import 'neat'; @import 'global';

And my styles directory only contains: styles | global.scss | application.scss |-- base | |--_base.scss | |-- _buttons.scss | |-- _forms.scss | |-- _grid-settings.scss | |-- _lists.scss | |-- _tables.scss | |-- _typography.scss | +-- _variables.scss |--- component (full of my legacy scss components from playbook v1) +-- page (full of my legacy scss layout from playbook v1)

Am I missing something in these directories?

[mramitpatel]

What's even more odd... If I run gulp serve, I'll get a different error every time:

Error: error app/styles/page/default.scss (Line 21: Undefined mixin 'media'.) Amits-MBP:new-giant amit$ gulp serve -f [17:31:00] Using gulpfile ~/sites/new-giant/gulpfile.js [17:31:00] Starting 'serve'... [17:31:00] Starting 'clean'... [17:31:00] Finished 'serve' after 7.45 ms [17:31:00] Finished 'clean' after 17 ms [17:31:00] Starting 'html'... [17:31:00] Starting 'styles'... [17:31:00] Starting 'scripts'... [17:31:01] Starting 'watch'... [17:31:01] Finished 'watch' after 47 ms [17:31:01] Finished 'scripts' after 578 ms

events.js:85 throw er; // Unhandled 'error' event ^ Error: error app/styles/page/home.scss (Line 67: Undefined mixin 'span-columns'.) Amits-MBP:new-giant amit$

[mramitpatel]

Even more sleuthing has uncovered this: Backtrace: app/styles/component/footer.scss:13:in media' app/styles/component/footer.scss:13 /Users/amit/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sass-3.4.16/lib/sass/tree/visitors/perform.rb:348:inblock in visit_mixin'

So basically, I have a bigger issue than anticipated and is probably unrelated to this generator or playbook. If anyone has ideas on how to fix this, let me know.

[zkellerdevelops]

Would it make sense to jump down to Ruby 2.0 via rbenv and run it again?

[mramitpatel]

@zkellerdevelops I did and the same error occurs.

[bval]

@mramitpatel You must include all of the dependencies before you include base/base. Try moving your @import 'base/base' to the bottom of those other import's.

[mramitpatel]

The issue was files named "modal.scss" vs "_modal.scss". Boy do I suddenly feel stupid.

[dcalhoun]

@mramitpatel no worries. I'm glad you were able to figure it out.

Any underscore prefixed file is considered a partial by Sass and is not compiled standalone. Since the file was not prefixed, Sass attempted to compile it by itself and the file was missing the appropriate dependency @import's (e.g. – Bourbon, Neat).