Grunt dynamic dest location sass
<p>This could possibly be a repeat question but I couldn't figure out a solution for my requirement</p>

<p>I am trying to create a sass grunt task which can generate css files in a dynamic location. Here is my structure</p>

<pre>
/components
 --> xyz 
   --> scss
     --> xyz.a.scss
     --> xyz.b.scss
 --> abc
   --> scss
     --> abc.a.scss
     --> abc.b.scss
</pre>

<p>Can the grunt task create a new folder relative to its component i.e </p>

<pre>
/components
 --> xyz
   --> scss
     --> xyz.a.scss
     --> xyz.b.scss
   --> css
     --> xyz.a.css
     --> xyz.b.css
 --> abc
   --> scss
     --> abc.a.scss
     --> abc.b.scss
   --> css
     --> abc.a.css
     --> abc.b.css
</pre>

<p>My current SASS task, generates CSS files in the same folder of SCSS</p>

<pre><code>sass: {
     dist: {
          files: [{
            expand: true,
            cwd: '&lt;%= yeoman.client %&gt;/components/',
            src: ['**/*.scss'],
            dest: '&lt;%= yeoman.client %&gt;/components/',
            extDot: 'last',
            ext: '.css'
          }]
     }
},
</code></pre>

<p>I understand we could achieve this by providing component folder name in the dest, for example for xyz component I could use dest as &lt;%= yeoman.client %>/components/xyz/css. But I will have to write seperate task for each component. Is there a way to keep dest in the same parent folder without actually specifying the name of the folder? i.e src: <code>['**/scss/*.scss']</code> and dest be: <code>['**/css/']</code>  Is there a way to do this?</p>