Grunt SASS Globbing issue - Error when importing partials folder

Question

I am attempting to use sass globbing in my grunt project. But when I include the folder containing my partials I get the following message “Warning: Error: File to import not found or unreadable: partials”

Here is my file structure:

styles
|_ main.scss
|_ partials
    |_ base
        |_ _base.scss
        |_ _form.scss
        |_ _normalize.scss
    |_ layout
        |_ _constrained.scss
        |_ _footer.scss
        |_ _header.scss
        |_ _main.scss
        |_ _nav.scss
    |_ modules
        |_ _animations.scss
        |_ _btn.scss
        |_ _form-search.scss
        |_ _formatted.scss
        |_ _icons.scss
        |_ _table.scss
        |_ _video.scss
    |_ tools
        |_ _functions.scss
        |_ _helpers.scss
        |_ _mixins.scss
        |_ _site-settings.scss

Configuration in the Gruntfile.js and main.scss files:

sass_globbing: {
    your_target: {
      files: {
        '_partialsMap.scss': 'partials/**/*.scss'
      },
      options: {
        useSingleQuoates: false
      }
    }
  }

in main.scss:

@import "partials/“

I suspected I had incorrectly defined my paths so tried this configuration:

sass_globbing: {
    your_target: {
      files: {
        '<%= config.app %>/styles/_partialsMap.scss': '<%= config.app %>/styles/partials/**/*.scss'
      },
      options: {
        useSingleQuoates: false
      }
    }

main.scss:

@import "partials/**/*";

and this:

sass_globbing: {
    your_target: {
      files: {
        'styles/_partialsMap.scss': 'styles/partials/**/*.scss'
      },
      options: {
        useSingleQuoates: false
      }
    }
  }

main.scss:

@import "partials/**/*";

I've followed the usage instructions found on the grunt-sass-globbing github page but I'm clearly doing something wrong here. If someone could point it out that would be great.

Thanks

Dave

Answer 1

You should not mix the syntax from the Ruby gem sass-globbing with the syntax proposed by my plugin.

When you use the configuration below, it will create a _partialsMap.scss file. In your main.scss file, you have to import this newly created file with @import "partialsMap“

sass_globbing: {
  your_target: {
    files: {
      '_partialsMap.scss': 'partials/**/*.scss'
    },
    options: {
      useSingleQuoates: false
    }
  }
}