britco/node-sass-globbing

Extension for node-sass to allow you to do import "dir/*.sass". Inspired by https://github.com/chriseppstein/sass-globbing

node-sass-globbing

Allows you to use glob syntax in imports (i.e. @import "dir/*.sass"). Use as a custom importer for node-sass.

Example

gulpfile.js

nodeSassGlobbing = require('node-sass-globbing');

sass.render({
  ...
  importer: nodeSassGlobbing
  ...
});

Then you can import globs!

foo.sass

@import "dir/*.sass"

Tests

npm test

License

Available under the MIT License.

node-sass-globbing's Issues

Anyway to use this with the node-sass cli without gulp

This may be a dumb question, but I'm wondering if you can use node-sass-globbing with the node-sass cli in some way, instead of through gulp. I like to just use the node-sass watch and output commands compiling while I write my sass. I am wondering node-sass-globbing can be used from the node-sass cli, and if so, how its done. Thank you.

Doesn't work with gulp-sass

The variable passed to the function are incorrect, e.g.:

// url: modules/* 
// prev: stdin 
// done: function done(data) {
//        bridge.success(data);
//       }

This is because when using opts.data to pass the content of a sass file in, rather than opts.file to pass the file name, sass doesn't know the cwd.

We could conditionally use this.includePaths inside the importer (which works in node-sass > 3.0.0) but would require potentially looping through an array of paths and applying the glob to each. Maybe the original sass-globbing can help.

I also created an issue on gulp-sass (dlmanning/gulp-sass#324) about an alternative work around.

Recursive Watch not working for glob files

I am running the following:

node-sass --importer ./node_modules/node-sass-globbing/index.js --source-map true --watch=scss --recursive scss/app.scss public/css/app.css

inside app.scss i have the following:
@import 'vars';
@import '../app/**/.scss';

When I edit app.scss or vars.scss sass recompiles
When I edit ../app/foo.scss sass does not recompile

If I manually run node-sass I see the changes made in foos.scss.

It is importing the file correctly, however, It does not watch the file

Import works but it doesn't know the variables/mixins

app.scss

@import "abstractions/*.scss";

.test {
  background: $testvar;
}

abstractions/_test.scss

$testvar: #000;

throws:

Error: Undefined variable: "$testvar".
        on line 4 of stdin
>>   background: $testvar;

Gulp task:

gulp.task('styles', function () {
    return gulp.src([
        'app/styles/*.scss',
        'app/styles/*.sass',
        'app/styles/*.css'
    ])
        .pipe($.plumber())
        .pipe($.sourcemaps.init())
        .pipe($.if('*.scss', $.sass({
            importer: nodeSassGlobbing,
            precision: 10,
            includePaths: ['bower_components'] // additional search paths if file not found
        })))
        .pipe($.postcss(processors)) // browser hacks / fixes
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest('.tmp/styles'))
        .pipe($.if('*.css', $.minifyCss()))
        .pipe(gulp.dest('dist/styles'))
        .pipe($.size({title: 'styles'}));
});