2

I'm attempting to use Dennis Becker's grunt-sass-globbing plug-in with libsass since libsass doesn't support sass-globbing. https://github.com/DennisBecker/grunt-sass-globbing

I've tried setting up a libsass project using the documentation that the developer has provided.

I'm having trouble figuring out exactly where files need to be placed and how imports should be called.

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
      }
    },

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

    // Grunt-contrib-watch
    watch: {
      sass: {
        files: ['css/sass/**/*'],
        tasks: ['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/**/*";

I've also posted this question/issue on the grunt-sass-globbing repo.

dlahay
  • 31
  • 4

2 Answers2

1

Dennis Becker, the developer of grunt-sass-globbing helped me identify the two issues with my setup:

  1. I didn't identify a target in the sass_globbing task in the Gruntfile:

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

  2. My main.scss should have had the name of the map file in the @import:

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

@import "layoutMap";
@import "typographyMap";

Things are now working smoothly. Thanks, Dennis.

dlahay
  • 31
  • 4
0

I have answered this on the GitHub repository website. It was just an issue with the Gruntfile.js configuration - thee was no target defined on the sass_globbing task.

Radhad
  • 125
  • 1
  • 6