sassgruntjscompass-sassgrunt-contrib-compass

Several CSS output with grunt-contrib-compass


I'm using grunt-contrib-compass to process my SCSS files into a single CSS file. Basically, compass considers all the SCSS files matching app/styles/**/*.scss and compile them into .tmp/styles/main.css.

I would like to split this behavior into :

  1. app/styles/specific/**/*.scss to .tmp/styles/specific.css
  2. app/styles/**/*.scss to .tmp/styles/main.css (ignoring specific)

However, I have no idea how to configure grunt regarding my configuration file which is quite simple :

options: {
    sassDir: '<%= yeoman.app %>/styles',
    cssDir: '.tmp/styles',
    imagesDir: '<%= yeoman.app %>/images',
    javascriptsDir: '<%= yeoman.app %>/scripts',
    fontsDir: '<%= yeoman.app %>/styles/fonts',
    importPath: '<%= yeoman.app %>/bower_components',
    relativeAssets: true
}

I couldn't figure out any solution especially since the compass documentation states that cssDir and sassDir only allows string as a parameter. Does this has to be done in an other task?


Solution

  • I think you should try grunt-contrib-sass that have internal support for compass:
    https://npmjs.org/package/grunt-contrib-sass

    from documentation:

    compass 
    Type: Boolean
    Default: false
    
    Make Compass imports available and load project configuration 
    (config.rb located close to the Gruntfile.js).
    

    And you can use global patterns of gruntjs:
    http://gruntjs.com/configuring-tasks#globbing-patterns

    sass: {
     dist: {
      files: [
        {
          src: 'app/styles/specific/**/*.scss', 
          dest:'.tmp/styles/specific.css'
        },
        {
          src: ['app/styles/**/*.scss', '!app/styles/specific/**/*.scss'],    
          dest:'.tmp/styles/main.css'
        }
      ]
     }
    }