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 :
app/styles/specific/**/*.scss
to .tmp/styles/specific.css
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?
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'
}
]
}
}