dennisbecker / grunt-sass-globbing Goto Github PK

I love this plugin!

However, for reasons similar to #15, it would be nice to have the ability to skip over files so we can add them separately in the order we need. I believe this is a better solution than changing the import order as it wouldn't mess with anyone's expectations on how the plugin works.

Many other grunt tasks offer this functionality with a syntax like:

sass_globbing: {
 'app/assets/css/_importMap.scss': ['app/modules/**/*.scss', '!app/modules/core/utilities/utilities.scss']
}

If it helps here are some that work that way:
https://github.com/gruntjs/grunt-contrib-copy
https://github.com/gruntjs/grunt-contrib-jshint
https://github.com/gruntjs/grunt-contrib-clean

Thanks!

I'm trying to glob a directory without using Grunt (it's not a part of the project).

Looking through the sass_globbing.js, it looks possible to separate the globbing logic from the Grunt task.

It would make it easier to install the package but import the globbing logic to use it without Grunt, if anyone wanted to.

What does everyone think?

Hello @DennisBecker,

Thanks for the plugin. It is a real time saver.

I've added it to my my grunt task and it is working all smoothly. Only problem is I have folders inside the globbing folder and a main .scss file inside the globbing folder which I need to call first.
It could be better explained with this diagram

GLOBBING FOLDER/
|
|-- folder1/              
|   |-- scss/
|       |-- *.scss
|       ...
|-- folder2        
|   |-- scss
|       |-- *.scss
|       
|-- folder3/              
|   |-- scss/
|       |-- *.scss
|       ...
|-- folder4/              
|   |-- scss/
|       |-- *.scss
|       
|-- main.scss

I need the main.scss file to be called before any other .scss file is imported. Is this possible?

Signature is a awesome option, I am using it like this:

  options: {
    signature: '////\n/// Imports\n////'
  }

The result is:

////
/// Imports
////

But I think use the name of file is better than the name "Imports".

Issue reportes per email.

Using grunt-sass-globbing on Windows results with backslashes in the @import statement.

Actual:
@import "partials\colors";

Expected:
@import "partials/colors";

This happens while using the path methods of node.js, so a fix will be easy

I am using the sass syntax for my files and would be nice to get the same syntax generated for the "mass-import" files.
I know libsass and Ruby Sass compilers are able to handle both files, it's just a matter of not mixing the two syntaxes in the same project.

Right now if the import file is inside of the globbed folder it will attempt to recursively import itself. It is pretty common practice to put the import file inside of the folder getting globbed, and seems it wouldn't be hard to exclude that file.

After some testing and reading documentations I've seen that this plugin also works out-of-the-box with different CSS preprocessors. I have created it to use it with Grunt / libsass, but it also works well with Less or PostCSS.

I'm unsure if this plugin should be renamed to clearify, that it also works well with the other preprocessors.

It would be nice if you comment on this issue with +1 for renaming or -1 on not renaming this plugin.

Not sure if I missed something but when using .sass indented syntax, the quote marks around the imports and semi colons should to be removed. We would need the ability to switch between .sass or .scss support.

I've been wanting to use Libsass for a while now and I couldn't because I read that it was not yet compatible with globbing & breakpoint which I like both a lot. Thanks to Zell's article http://www.zell-weekeat.com/grunt-sass-with-susy/ I realized I could use Breakpoint as a bower component. The only missing piece was globbing and thanks to you I'm all set to play with my new toys now :)

Interested people should have the ability to see a more detailed changelog compared to the actual one. The changelog should use the syntax shown at http://keepachangelog.com/

Sass interpreters report an error if a partial _color.scss and color.scss are in the same folder for an import.

grunt-sass-globbing should implement such a collision check so that developers can find such an issue as early as possible.

when I use this plugin to glob files from multiple directories, it breaks my sourcemaps. any clues on how to manage sourcemapping with grunt-sass-globbing would be appreciated. (also, in case it matters, after I run the plugin I obviously compile my Sass and then run it through a couple of postcss plugins, though I believe they're configured properly.)

Any chance you can change the //generated with grunt-sass-globbing comment that gets added to the top of the destination file to be CSS compliant? Specifically, /* generated with grunt-sass-globbing */. I'm using grunt-sass-globbing in conjunction with postcss (rather than SASS), and the postcss processor gets hung-up on the non-compliant comment. Thanks!

I'm having trouble determining where files need to be placed and how imports should be called. Any help would be appreciated.

The below setup throws this error:

Running "sass_globbing:files" (sass_globbing) task

Running "sass:app" (sass) task
>> file to import not found or unreadable: layout/**/*
>> Current dir: /Users/dlahay/Documents/Workspaces/SusyLibsass/css/sass/
>>   Line 3  Column 9  css/sass/main.scss

File structure:

css
|_ main.css
|_ sass
  |_ layout
    |_ _base.scss
  |_ typography
    |_ _base.scss
  |_ _layoutMap.scss
  |_ _typographyMap.scss
  |_ main.scss

Gruntfile.js

grunt.initConfig({
    sass_globbing: {
      files: {
        'css/sass/_layoutMap.scss': 'css/sass/layout/**/*.scss',
        'css/sass/_typographyMap.scss': 'css/sass/typography/**/*.scss',
      },
      options: {
        useSingleQuotes: false
      }
    },

    sass: {
      app: {
        files: [{
          expand: true,
          cwd: 'css/sass',
          src: ['*.scss'],
          dest: 'css',
          ext: '.css'
        }]
      },
      options: {
        sourceMap: false,
        outputStyle: 'nested',
        imagePath: "../",
      }
    },

    watch: {
      sass: {
        files: ['css/sass/**/*'],
        tasks: ['sass_globbing', 'sass']
      },
      options: {
        livereload: true,
        spawn: false
      }
    },
});

grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass-globbing');

grunt.registerTask('default', ['sass_globbing', 'sass', 'watch']);

main.scss:

@import "../../bower_components/susy/sass/susy";

@import "layout/**/*";
@import "typography/**/*";

Hi,

after updating to 1.5.0 I've encountered an issue with generated relative paths outside the current directory.

Given the following directory structure

assets
    - components
        - someModule
            - somemodule.variables.scss
    - scss
        - variables

and the following grunt task configuration

module.exports = function(grunt) {
  'use strict';
  return grunt.config.set('sass_globbing', {
    dist: {
      options: {
        useSingleQuotes: true
      },
      files: {
        'assets/scss/variables/_components.scss': 'assets/components/**/*.variables.scss'
      }
    }
  });
};

I get the following generated _components.scss file

/* generated with grunt-sass-globbing */

@import '..components/someModule/somemodule.variables';

which is definitely a wrong path.

Using version 1.4.0 I get the correct assumed file output:

/* generated with grunt-sass-globbing */

@import '../../components/someModule/somemodule.variables';

First thanks for the great plugin.

I just tried to implement the usage example from the README.md but it doesn't work for me.
It works if I add a target before the files.

grunt.initConfig({
  sass_globbing: {
    my_target: {
      files: {
        'src/_importMap.scss': 'src/partials/**/*.scss',
        'src/_variblesMap.scss': 'src/variables/**/*.scss',
      }
    }
  }
});

Is this the correct way?

sass-globbing removes all underscores in path instead of when the file is a partial like _colors.scss.

Has anyone noticed this issue before or is there something I am missing? This could also be a grunt-sass issue as well. I haven't quite figured it out yet.

I have this example scss:
.class { @import "../../variables-global"; }

What I expect to see output is:
.class { color: #f00; }

What is actually being outputted by sass_globbing
.class { .class { color: #f00; } }

Can you please publish to NPM with the latest release. Grunt 1.0 has released and the version in the registry does not have the updated peerDependencies.