I am using Compass through grunt to compile a SASS file. My directory structure looks like this:
project/
Gruntfile.js
package.json
sass/
part1/
part1.sass
css/
And my Gruntfile.js:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
std: {
options: {
sassDir: 'sass',
cssDir: 'css',
specify: 'sass/part1/part1.sass',
raw: 'disable_warnings = true\n'
}
}
}
});
When I run my gruntfile, Compass outputs to project/css/part1/part1.css
, but I want it to output to project/css/part1.css
instead. How can I do this? Right now I am using an on_stylesheet_saved hook to move the file, but it is not very elegant.
Hopefully the question is clear, and thanks in advance.
I recreated your environment. I could simplify the Gruntfile.js
even more:
module.exports = function(grunt) {
// Main project configuration
grunt.initConfig({
// Read NPM package information
pkg: grunt.file.readJSON('package.json'),
// Compass
compass: {
std: {
options: {
cssDir: 'css',
sassDir: 'sass'
}
}
}
});
// Load the grunt tasks
grunt.loadNpmTasks('grunt-contrib-compass');
// Compile production files
grunt.registerTask('std', [
'compass:std'
]);
// Default task(s)
grunt.registerTask('default', 'std');
};
What you are getting is the expected compass behavior.
Reading a bit through the grunt-contrib-compass's readme, I see:
Compass operates on a folder level. Because of this you don't specify any src/dest, but instead define the
sassDir
andcssDir
options.
That means that you cannot change the path to where your CSS
gets compiled to, only determine the path of the root folder to which all compiled files are written to.
While it can be annoying, compass
is simply assuming that keeping the compilation true to the directory structure is supposed to be something you would rather do - which is somewhat opinionated.
You could still do what you want, by:
compass
would expect them to be to comply to your intention. Namely dropping the part1
directory and placing part1.sass
under the sass
folder.CSS
files to a temporary folder like tmp
, using another task like copy
(grunt-contrib-copy) to copy all CSS
files to the css
folder and then use a task like clean
(grunt-contrib-clean) to empty the tmp
file. You would load the tasks in that order, so they run in the right sequence.