SASS workflow for easier CLI debugging via Grunt

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

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 2

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