SASS workflow for easier CLI debugging via Grunt - css

Question

Here is my workflow I have 20 scss files that are imported into one 'app.scss' see below
#import
"base/normalize",
"base/foundation/functions",
"base/settings",
"app/functions",
"app/mixins",
"app/components/icons",
etc
the SASS folder structure is organized 'SASS/base and SASS/base' root has one 'app.scss' file that imports everything
I compile compile and watch changes via 'Gruntfile.js' -- it looks something like this
sass: {
dist: {
options: {
includePaths: ['scss'],
imagesDir: 'assets/img',
cssDir: 'assets/css'
},
files: {
'assets/css/app.css': 'sass/app.scss'
}
}
},
watch: {
sass: {
files: 'sass/**/*.scss',
tasks: ['sass']
},
css: {
files: 'assets/**/*.css',
options: {
livereload: true
}
},
javascript: {
files: ['app/**/*.js', 'app/**/*.hbs'],
options: {
livereload: true
}
}
},
This is great for production but while in dev I would like to have different css files for debugging purposes..
is there a way of having multiple css files via Gruntfile and SASS for development without having to include 20 <link rel="stylesheet"... while in dev stage...
based on comment about using sourceMap, sourceComments here is what my grunt looks like
sass: {
dist: {
options: {
includePaths: ['scss'],
imagesDir: 'assets/img',
cssDir: 'assets/css'
},
files: {
'assets/css/app.css': 'sass/app.scss'
}
}
sourceComments: {
options: {
sourceComments: 'normal'
},
files: {
'assets/css/source-comments-app.css': 'sass/app.scss'
}
},
sourceMap: {
options: {
sourceComments: 'map',
sourceMap: 'source-map.css.map'
},
files: {
'assets/css/source-maps-app.css': 'sass/app.scss'
}
},
},
but am getting an error... is grunt suppose to get all the mapping information from app.scss for the sourcemap and sourceComments?

Answer 1

You can use a source map to easily identify which sass file a part of the compiled app.css comes from.
See the sourceComments and sourceMap options in the grunt-sass plugin.

Answer 2

I found the answer via grunt..after a lot of trials
sass: {
dist: {
options: {
includePaths: ['scss'],
imagesDir: 'assets/img',
cssDir: 'assets/css',
sourceComments: 'map',
sourceMap:'assets/css/app.css.map'
},
files: {
'assets/css/app.css': 'sass/app.scss'
}
}
},
it has to be inside the options of the scss compile!

Answer 3

I'm using Grunt with Foundation 5 (a Foundation 5 Drupal subtheme, to be exact), and it worked when I added sourceComments: "map" to dist, like so:
dist: {
options: {
**YOUR OTHER OPTIONS HERE***
sourceComments: "map"
}
}