using node-sass with Gulp but getting a top level partial compiled also

[sturobson]

I've got a file/folder structure of

| sass | styles.scss
| sass | _variables.scss
| sass | everything-else

in my gulpfile.js I have this task to compile the .scss files into .css

        gulp.task('sass', function (){
            gulp.src('./dev/sass/*.scss')
                .pipe(sass({
                    includePaths: ['./dev/sass']
                }))
                .pipe(prefix(
                    "last 1 version", "> 1%", "ie 8", "ie 7"
                    ))
                .pipe(gulp.dest('./dev/css'))
                .pipe(minifycss())
                .pipe(gulp.dest('./prod/css'));
        });

the includePath does a great job of excluding anything in | sass | everything-else but compiles the _variables.scss file to _variables.css with no content.

I can't fathom how to use the options with node-sass to not compile that file. I don't really want to remove it from the 'top level' of my Sass folder.

I'm sure it's something simple.

For clarity here's my full gulpfile.js - https://gist.github.com/sturobson/8343865

[kennethormandy]

I believe you need to use either data or file along with includePaths, but I might be wrong about that. Here’s how it was done for Harp, if it’s helpful at all. I know having a partial in the root works with that, at least.

[nschonni]

You need to exclude partial files when you use globbing using a !. See grunt-sass for various discussions on the same thing.

[sturobson]

As per a tweet conversation with @andrew and @neilkinnish - https://twitter.com/teabass/status/421724498103386112 I'm re-opening this

Looking at the specification for Sass over at - http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials it states -

"If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file."

So I'd suggest there's something wrong with node-sass / libsass rather than the implementation in gulp/grunt meaning that we shouldn't need to include ! as any _partial.scss shouldn't be compiled into CSS.

Hopefully pinging @hcatlin will firm up what's at fault here too

[nschonni]

The problem is that each file is passed to node-sass, which is why even the Ruby based version has the same problem gruntjs/grunt-contrib-sass#72

[sturobson]

I find it odd that "even the Ruby based version has the same problem" as I have only noticed it since moving to node-sass using exactly the same file structure.

Irregardless, if the specification from sass-lang is that they don't get compiled. They shouldn't get compiled, right?

update: (obviously my 'works for me' statement in the first sentence is not helpful, apologies)

[nschonni]

Because the globbing is being expanded to individual sass calls, there is no avoiding it.
sass _variables.scss will compile the file even though it is a partial.

---

😊 Duh, I was actually the on that fixed that in gruntjs/grunt-contrib-sass#72
A similar approach would be required for the Gulp version.

(edit: added emoticon for context of me being forgetful)

[sturobson]

@nschonni 'Duh' ?

[sturobson]

"A similar approach would be required for the Gulp version." -
@neilkinnish has done this it seems - dlmanning/gulp-sass#9
update: this pull request is now merged

But I'll bang that drum again -

"if the specification from sass-lang is that they don't get compiled. They shouldn't get compiled, right?"

[nschonni]

Sorry, the "Duh" was directed at myself. I completely forgot that I had patched that in the Ruby and node-sass Grunt plugins.

[nschonni]

"if the specification from sass-lang is that they don't get compiled. They shouldn't get compiled, right?"

Running node-sass someDirWithPartials/*.scss will not compile the partial as per the spec.
Running node-sass someDirWithPartials/_explicitFileName.scss will compile the file.

This behaviour matches the Ruby CLI

[sturobson]

Ah, right as you say it's down to the the globbing? I guess there's no way to get that to adhere? Or is there something that can be updated in a wiki or similar to save this frustration again?

[nschonni]

Not sure that the instructions belong here since it isn't specific to this implementation, but I agree that it is annoying.