Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Trying to compile all scss files into one css file

Tags:

css

sass

gruntjs

I have a grunt file but I am having problems getting it to compile. When I watch it it appears to run fine but does not produce any files.

What am I missing?

module.exports = function(grunt) {
    grunt.initConfig({
        pngmin: {
            compile: {
                options: {
                    ext: '.png',
                    force: true,
                    speed: 3,
                    colors: 200
                },
                files: [{
                    expand: true, // required option
                    src: ['**/*.png'],
                    cwd: 'public/images/src/', // required option
                    dest: 'public/images/dist/'
                }]
            }
        },
        sass: {
            dist: {
                files: [
                    {
                        expand: true,
                        cwd: "public/sass",
                        src: ["**/*.sass"],
                        dest: "public/stylesheets",
                        ext: ".css"
                    }
                ]
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });


    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-pngmin');
    grunt.registerTask('default', ['pngmin', 'watch', 'sass']);

};
like image 877
ThinkNewDev Avatar asked Aug 23 '14 22:08

ThinkNewDev


People also ask

Does SCSS get compiled into CSS?

scss is compiled into CSS when you save your project manually or automatically and how the changes to _grid.

Which directive is used to convert multiple SASS into single or multiple CSS files?

Sass Importing Files Just like CSS, Sass also supports the @import directive. The @import directive allows you to include the content of one file in another.


1 Answers

You are watching scss files, but you have sass files in your sass task.

Assuming you are using sass files, you have to change your code to something like this:

    sass: {
        dist: {
            files: [
                {
                    expand: true,
                    cwd: "public/sass",
                    src: ["**/*.sass"],
                    dest: "public/stylesheets",
                    ext: ".css"
                }
            ]
        }
    },
    watch: {
        css: {
            files: '**/*.sass',
            tasks: ['sass']
        }
    }

Regards.

like image 122
Mario Araque Avatar answered Sep 17 '22 13:09

Mario Araque