grunt-contrib-sass: How do I add a subfolder into the destination dynamically?

Question

I have a directory structure of:

• views
  • _static_
    • some.js
  • somesass.scss
  • something.jade

I was hoping to do something like this: sass: { dist: { options: { style: 'expanded' }, files: [{ expand: true, cwd: 'views', src: ['*/*.scss'], flatten: true, dest: 'views/*/_static_', ext: '.css' }] } },

If I just do dest: 'views' and remove flatten:true then it, at least, puts it in the same folder the .scss file is in, but I can't figure out how to say "ok, add '_static_' to the cwd of the current file and place the .css in there." How/can I do that with grunt-contrib-sass?

If wondering why I'm not just throwing all the compiled CSS into one directory, it's because this is for an experimentation server for myself, so I'm not minifying or anything.

Answer 1

In order to get the sub-folder into the path I had to use rename: function(dest, src){ .. }, but things didn't work as I would assume. First off, flatten is not what is wanted so we can get at the parent directory through src. The other thing to be aware of is that src inside rename: will have whatever.css as the file, even if the src outside is defined as ['*/*.scss']. That works in our favor, but tripped me up because I expected to see whatever.scss. I still need to go back and work on it some, but this got the job done for me:

sass: { dist: { options: { style: 'expanded' }, files: [{ expand: true, cwd: 'views', src: ['*/*.scss'], rename: function(dest, src) { // src will have .css extension, not scss. var splitPath = src.split('/'); // Leaves the path preceding the filename in splitPath. var filename = splitPath.pop(); // There shouldn't be any other subdirectories, // but added j.i.c. until I can come back to it. var joinedPath = splitPath.join("/"); var customDest = this.cwd + '/' + joinedPath + '/_static_/' + filename; return customDest; }, ext: '.css' }] }

The end result is:

• views
  • _static_
    • some.js
    • somesass.css (ends up at the custom location after running grunt sass)
  • somesass.scss (the source Sass)
  • something.jade