CODEWITHSUNDEEP
node.jsgruntjs
hrsetyono
hrsetyono

Reputation: 4464

Grunt Sass - Compile all Sass files into CSS with the same name

I used Compass and it compiles all Sass files into CSS with the same name. For example my-style.scss will become my-style.css.

All tutorials about grunt-sass that I found mapped the file name one by one, manually like:

sass: {
  dist: {
    options: { style: 'compressed' },
    files: { 'css/my-style.css': 'sass/my-style.scss' }
  } 
}

Is there a way to make it more flexible? So I don't need to change the Gruntfile whenever I have new Sass file.

Thanks

Upvotes: 4

Views: 1133

Answers (2)

n1313
n1313

Reputation: 21381

Try this format for specifying your source and destination files: 

    sass: {
        src: {
            files: [{
                expand: true,
                cwd: 'source/styles/',
                src: ['**/*.scss'],
                dest: 'destination/styles/',
                ext: '.css'
            }]
        }
    }

This reads as "take all files matching *.scss in source/styles/ and its subfolders, process them and put them into destination/styles/, changing extension to .css. See also http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically

Upvotes: 7

Inacio Schweller
Inacio Schweller

Reputation: 1986

You should use the universal notation:

sass: {
  dist: {
    options: { style: 'compressed' },
    files: { 'css/*/**.css': 'sass/my-style.scss' }
  } 
}

In this case, the Grunt will go for all *.css files inside the css folder (including subfolders) regardless of the file name, and compile to my-style.scss

Upvotes: 0

Related Questions