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:
- Restructuring your files so that they are where
compass
would expect them to be to comply to your intention. Namely dropping thepart1
directory and placingpart1.sass
under thesass
folder. - Compiling your
CSS
files to a temporary folder liketmp
, using another task likecopy
(grunt-contrib-copy) to copy allCSS
files to thecss
folder and then use a task likeclean
(grunt-contrib-clean) to empty thetmp
file. You would load the tasks in that order, so they run in the right sequence.