Got cure for gulp-sass choking on @include ?

[iDGS]

As with Bower, I'm in the process of bording the Gulp task runner train because I learned (aways back, from one of your Tweets) that you were likely already on it. That said, I've yet to get those all-essential InuitCSS @import statements to work in a Gulp environment! Turns out there's a slew of gulp-sass related complaints in circulation out there--some even mentioning Inuit by name (e.g., https://github.com/dlmanning/gulp-sass/issues/1 ) --that I'm slowly slogging through in search of a working solution.

So, although I know it's somewhat tangential, I thought, Why not ask? Have you already figured out a way? If so, that would be mighty helpful info to (cough) include!

(Meanwhile I'll continue investigating... ;-)

[csswizardry]

Hi,

Can you give a little more detail on what’s actually happening, please? I don’t actually use Gulp, so this isn’t something I’m likely to be knowledgable about, but I do know of new inuitcss working fine in a Gulp environment, an @import is such a fundamental part of Sass that I can’t imagine the problem being anything too complicated.

[iDGS]

FYI, the specific, show-stopping error as reported by Gulp is: gulp-ruby-sass: error ./bundle.scss (Line 3: File to import not found or unreadable: ../../bower_components/inuit-defaults/settings.defaults.

Okaaaay... The first thing I've done is try to see if I can tackle things systematically. To that end, I've stepped back from Gulp, and--as a sanity check--installed Compass to test things directly. The good news: Compass is happy with my paths into ../../bowercomponents/(etc), understands the (per usual, unstated) Sass prefixes and .scss suffixes on the file names, and successfully code>@import</codes all of the InuitCSS starter kit. Plus, I can also successfully code>@import</code files of my own. Yay!

Yet, if I run Gulp, regardless of which set(s) of files I'm trying to code>@import</code, it barfs in the same fashion as above.

If I comment out all code>@import</codes in my Sass source, Gulp runs fine. (And that suspicious "." in front of "bundle" goes away. Gulp just reports: ...gulp-ruby-sass: write /bundle.css and write /bundle.css.map ...and completes successfully. (o_0) )

Again, there's a bunch of info out there about this issue, but I haven't yet been able to sort through it all to find an actual solution. E.g., some say Gulp needs explicit suffixes, others say... (You get the idea.)

If you happen to have a pal that would be willing to post a working Gulp solution here (their directory structure, gulpfile.js code, and etc.), that would be spiffy! Meanwhile, I plan to keep picking away at the problem...

[csswizardry]

This is the gulpfile.js:

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    prefix = require('gulp-autoprefixer'),
    browserSync = require('browser-sync');

// Asset paths
var paths = {
  sass: ['_scss/**/*.scss'],
  css:  ['css/**/*.css'],
  html: ['*.html']
};

// Proxy URL
// If using with existing app, put the server url here
// Also handy with Typekit and other services
var devURL = "xxx.xxx.xxx";

// TASK: Compile Sass
gulp.task('sass', function () {
  gulp.src(paths.sass)
    .pipe(sass({sourcemap: true, style: 'expanded', precision: '9'}))
    .pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 9"))
    .pipe(gulp.dest('css'));
});

// TASK: BrowserSync
gulp.task('browser-sync', function() {  
  browserSync.init(paths.css, {
    xip: true,
    // open: false,
    // notify: false,

    // Use this for vhost
    // proxy: devURL,
    // host: devURL

    // Use this to ask Node to generate URL
    server: {
      baseDir: "./"
    }
  });
});

// TASK: Watch for changes
gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.html, function(){
    browserSync.reload();
  });
});

// TASK: Default. Just run 'gulp' in CLI
gulp.task('default', ['sass', 'browser-sync', 'watch']);

Here is the master stylesheet:

/**
 * #SETTINGS
 */
@import "settings.global";
@import "settings.colors";

$inuit-base-font-size:      $base-font-size;
$inuit-base-line-height:    $base-line-height;
@import "bower_components/inuit-defaults/settings.defaults";

/**
 * #TOOLS
 */
@import "bower_components/inuit-functions/tools.functions";
@import "bower_components/inuit-mixins/tools.mixins";
@import "tools.mixins";
@import "tools.aliases";

/**
 * #GENERIC
 */
@import "bower_components/inuit-normalize/generic.normalize";
@import "bower_components/inuit-reset/generic.reset";
@import "bower_components/inuit-box-sizing/generic.box-sizing";
@import "bower_components/inuit-shared/generic.shared";
@import "bower_components/inuit-clearfix/generic.clearfix";

/**
 * #BASE
 */
$inuit-base-text-color: $color-base-text;
@import "bower_components/inuit-page/base.page";

html,
body {
    height: 100%;
}

@import "base.typography";

@import "bower_components/inuit-paragraphs/base.paragraphs";

$inuit-heading-size-2:  24px;
$inuit-heading-size-3:  20px;
$inuit-heading-size-4:  18px;
$inuit-heading-size-5:  16px;
@import "bower_components/inuit-headings/base.headings";

@import "base.links";
@import "bower_components/inuit-lists/base.lists";
@import "bower_components/inuit-images/base.images";

/**
 * #OBJECTS
 */
$inuit-enable-layout--flush:    true;
$inuit-enable-layout--middle:   true;
$inuit-enable-layout--bottom:   true;
$inuit-enable-layout--large:    true;
@import "bower_components/inuit-layout/objects.layout";

@import "bower_components/inuit-bare-list/objects.bare-list";

$inuit-enable-block-list--small:    true;
@import "bower_components/inuit-block-list/objects.block-list";

$inuit-enable-ui-list--small:   true;
$inuit-ui-list-border-color: $color-ui;
@import "bower_components/inuit-ui-list/objects.ui-list";
@import "bower_components/inuit-tables/objects.tables";

$inuit-enable-media--small:       true;
$inuit-enable-media--rev:         true;
$inuit-enable-media--responsive:  true;
@import "bower_components/inuit-media/objects.media";

$inuit-enable-flag--small:  true;
$inuit-enable-flag--rev:    true;
@import "bower_components/inuit-flag/objects.flag";

@import "bower_components/inuit-box/objects.box";

$inuit-btn-background:      $color-btn;
$inuit-btn-border-width:    2px;
$inuit-btn-radius:          $base-round;
$inuit-enable-btn--large:   true;
$inuit-enable-btn--small:   true;
$inuit-enable-btn--full:    true;
@import "bower_components/inuit-buttons/objects.buttons";
@import "bower_components/inuit-tabs/objects.tabs";
@import "objects.stats";
@import "objects.data-pair";
@import "objects.splitter";
@import "objects.forms";

/**
 * #COMPONENTS
 */
@import "components.frame";
@import "components.sidebar";
@import "components.page-head";
@import "components.site-nav";
@import "components.page-meta";
@import "components.buttons";
@import "components.boxes";
@import "components.lozenge";
@import "components.avatars";
@import "components.micro-profile";
@import "components.text";
@import "components.tabs";
@import "components.feed";
@import "components.tooltips";
@import "components.forms";
@import "components.masthead";
@import "components.modals";

/**
 * #TRUMPS
 */
$inuit-use-fractions:   false;
@import "bower_components/inuit-widths/trumps.widths";

$inuit-enable-margins:          true;
$inuit-enable-margins--none:    true;
$inuit-enable-margins--small:   true;
@import "bower_components/inuit-spacing/trumps.spacing";
@import "trumps.type";
@import "trumps.links";
@import "trumps.stacking";

[iDGS]

* whew! * Long story short: “Location, location, location!” That bit of classic advice about what are the three most important things to consider when opening a restaurant also applies here!

It seems that gulp and/or gulp-ruby-sass have some kind of elusive glitch that interferes with code>@import</code-ing files that are at an equal or higher level in the folder hierarchy. I ran a lot of tests, and--while insufficient to nail down the exact cause and behavior of the glitch--I was happy to at least find a solution that works!

The essential clue was that nobody's working examples--including those provided by you (thank you!)--ever showed gulpfile.js referencing a bower-components directory anywhere other than co-occupant (is that a word?) with their main .scss file (called whatever you will).

Here, then, is the explanation as a (step-by-step success!) story:

0) The goal is to bring together 3 great things (well, more; but these are the headliners): 1) InuitCSS, 2) Bower, and 3) Gulp

1) Set up some folders to hold a theme, here named "basic"

basic:
    dist:
        css:
    src:
        scss:

src is the source code folder, which contains a folder within it called scss for our main.scss that will code>@import</code the parts of InuitCSS that we want. dist is the distribution code folder, for the final compiled css and whatnot.

2) Navigate to the scss folder and bring in your InuitCSS modules like so:

$ cd (upwind/path/)basic/src/scss
$ bower init
$ bower install --save inuit-starter-kit

When you enter bower init, you can just keep hitting carriage returns to quickly create the necessary bower.json file you will need for that Bower install step that immediately follows it.

3) Create a .scss file to code>@import</code the spiffy InuitCSS modules you just installed. For example, copy paste the recommended Starter Kit prologue:

@import "bower_components/inuit-defaults/settings.defaults";
@import "bower_components/inuit-functions/tools.functions";
@import "bower_components/inuit-mixins/tools.mixins";
@import "bower_components/inuit-normalize/generic.normalize";
@import "bower_components/inuit-box-sizing/generic.box-sizing";
@import "bower_components/inuit-page/base.page";

into a new file and save it into (upwind/path/)basic/src/scss as main.scss (or whatever). NB. Remember, we're just demo-ing the code>@import</code solution--obviously you'd have more code than that in your .scss file!

Here's what we've got so far:

basic:
    dist:
        css:
    src:
        scss:
            bower_components:
                inuit-box-sizing:
                inuit-defaults:
                inuit-functions:
                inuit-mixins:
                inuit-normalize:
                inuit-page:
            bower.json
            main.scss

Our src "inbox" is nice and tidy. All we need now is something to compile our SCSS into plain CSS and put it into our dist/css "out basket."

4) In Terminal, pop up two levels so you're in the basic directory, and bring in Gulp and whatever related bits you might need. For instance:

$ cd ../../
$ sudo npm install gulp gulp-ruby-sass gulp-autoprefixer del --save-dev

5) Next, add a gulpfile, which you'll use to drive the compilation of scss into css, and--oh, I'm sure you noticed!--let's also run autoprefixer on our css, so we don't have to worry about prefixing our css to accommodate different browsers. Here's the code to save into the basic directory as gulpfile.js:

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    prefix = require('gulp-autoprefixer'),
    del = require('del');
// Asset paths
var paths = {
  sass: ['src/scss/**/*.scss']
};
// TASK: Compile Sass
gulp.task('sass', function () {
  gulp.src(paths.sass)
    .pipe(sass({sourcemap: true, style: 'expanded', precision: '9'}))
    .pipe(prefix("last 2 version", "> 1%", "ie 8", "ie 9"))
    .pipe(gulp.dest('dist/css'));
});
// Not all tasks need to use streams
// A gulpfile is just another node program and you can use all packages available on npm
gulp.task('clean', function(cb) {
  // You can use multiple globbing patterns as you would with `gulp.src`
  del(['dist/**/*.css', 'dist/**/*.map'], cb);
});
// TASK: Default. Just run 'gulp' in CLI
gulp.task('default', ['clean', 'sass']);

My earlier confusion about what I could have where (and make things actually work!) is solved by this arrangement, which now looks like:

basic:
    dist:
        css:
    gulpfile.js
    node_modules:
        del:
        gulp:
        gulp-autoprefixer:
        gulp-ruby-sass:
    src:
        scss:
            bower_components:
                inuit-box-sizing:
                inuit-defaults:
                inuit-functions:
                inuit-mixins:
                inuit-normalize:
                inuit-page:
            bower.json
            main.scss

6) All that remains is to "push the button" to get your css output where you want it (namely in the dist/css directory):

$ gulp

That should promptly give you two lovely files: main.css and main.css.map:

basic:
    dist:
        css:
            main.css
            main.css.map
    gulpfile.js
    ...

7) Celebrate!

Again, the work-around to whatever the (intractable and highly aggravating!) problem was was to not install the Bower stuff up in the same upper level basic directory as Gulp, but rather to put it down in the src/scss directory along with the main.scss file that would be doing the InuitCSS module code>@import<code-ing. That works!

[csswizardry]

Nicely done! I’ll close this issue and direct anyone who might need it toward it.

Thanks!