1

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?

nolawi
  • 4,439
  • 6
  • 22
  • 45

3 Answers3

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.

jtfairbank
  • 2,311
  • 2
  • 21
  • 33
  • trying to understand but the documentation in the plugin is pretty thin... if i add the `sourceComment` and `ourceMap` in my `grunt.initConfig` nothing changes.. it still compiles to one file I dont see any map in the console... – nolawi Apr 15 '14 at 13:59
  • You should just have to set `sourceComments: "map"` in your grunt config. Based on the documentation that should create a source-map that's placed in the same directory as the outputted css files. – jtfairbank Apr 15 '14 at 14:42
  • Let me know if you're still having trouble and I'll take a further look tonight. I should really implement this functionality for my project bootstrapper [Milkshake](https://github.com/jtfairbank/Milkshake), so also let me know what you did to make it work. :) – jtfairbank Apr 15 '14 at 14:43
  • yap am having trouble. I tried to add it via example [https://github.com/sindresorhus/grunt-sass/blob/master/Gruntfile.js] but it looks doesnt make sense at all.. – nolawi Apr 15 '14 at 15:30
0

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!

nolawi
  • 4,439
  • 6
  • 22
  • 45
0

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