Grunt - Compile and import separate sass in dev, but concatenate them when build

Question

So I have a folder that contains many scss files. I used to @import them all into one big main.scss file. But with time, the file got bigger and it now takes more than 20 sec to see the result of the change after the whole file is re-compiled.

I'd like to use Grunt to watch scss files, recompile only the one that changed, and refresh the page with something like grunt serve. In dev, the html page should have as many <link> tags as there are scss files. In prod, i want to be able to concatenate them all into one main.css file with something like grunt build

Also, please note that I have some variables.scss files that can potentially be used in any of the partials. So they should have access to those variables as well.

I don't quite know where to start. Any help would be much appreciated.

Answer 1

The anwser heavily dependes on two factor: what framework (or none) do you use (I guess you're using node) and how do you structure your files.

There are a lot of defferent practices on how to structure your sass project. Here are some links: sassway, sitepoint, yeoman generator. I am using the following structure:

- scss/
- - modules/
- - - first_app/
- - - - module.scss (main file for a module)
- - - - body.scss
- - - - footer.scss
- - - second_app/
- - - - ...
- - partials/
- - - resets_and_fixes.scss
- - - brand.scss  # (for constants)
- - functions/
- - - functions.scss
- - - mixins.scss
- - main.scss (project's main file)

The benefit of having module.scss in each module is that it is easy to load just the required styles for a single module. And it is easy to include it to the main.scss. I have two sass task, which are defined like so:

sass: {
  dev: {
    options: {
      noCache: false, // disabling cache
      style: 'expanded',
      sourcemap: 'file' // auto, file, inline, none
    },
    // use script to crawl all the modules or set only one you are currently working at:
    files: { 
      expand: true,
      flatten: true,
      cwd: path.join('scss', 'modules', module.name),
      src: ['**/*.scss'],
      dest: path.join('build', module.name, 'css', 'src')),
      ext: '.css'
    }
  }, 
  build: {
    options: {
      noCache: false, // disabling cache
      style: 'compressed',
      sourcemap: 'none' // auto, file, inline, none
    },
    files: { // build the main.scss file, or each 'module.scss' separately
      'build/main/css/main.css': 'scss/main.scss' //,
      // crawlModulesForMainFiles()
    }
  }
}

In my templates (I am using Django) I have the following setting:

{% if debug %}
  <link rel="stylesheet" type="text/css" href="urls/to/my/dev/files" />
{% else %}
  <link rel="stylesheet" type="text/css" href="build/main/css/main.css" />
{% endif %}

For other frameworks there are different options like this one.

Alternatevly, there is an intresting grunt-task, called grunt-usemin. Take a look at it.

Was it helpful for you?