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.
Dennis Becker, the developer of grunt-sass-globbing helped me identify the two issues with my setup:
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
}
},
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.