尝试将sass / scss文件编译为css文件（一对一）

Question

We are trying to compile our sass files to css files, however we want to compile each individual sass file into an individual css file (one-to-one).

For example our product_view.scss should have a product_view.css .

However all configurations we have tried create one css file for everything called styles.css in our "out/css" folder.

sass: {
    dist: {
        options: {
            compass: true,
            style: 'expanded'
        },
        files: [{
            expand: true,
            cwd: '<%= pkg.src %>/assets/sass',
            src: ['*.scss'],
            dest: '<%= pkg.src %>/assets/media/out/css',
            ext: '.css'
        }]
    },

},

Answer 1

I use grunt-contrib-compass (Compass) to compile my SASS, which has some nice extras. For example, compass includes a reset utility you can use by using

@import 'compass/reset';

But disregarding that, compass also outputs every file individually (as long as it does not start with _ which are files that can be included but won't be compiled by themselves). Here is the setup I use in my gruntfile:

compass: {
    'default': {
        options: {
            sassDir: "css/sass/",
            cssDir: "css/",
            outputStyle: "compressed"
        }
    }
}