CODEWITHSUNDEEP
csssassgruntjsgruntfile
Kendall
Kendall

Reputation: 5255

Autoprefixing using Grunt + PostCSS

I'm using Sass and rather than create a mixin I'm trying to use grunt-postcss to add my vendor prefixes on my class definitions...

this is my css

@keyframes {
    from { transform:scale(1); }
      to { transform:scale(2); }
}

My gruntfile 

watch:{
        sass: {
            files: ["sass/partials/*.scss","sass/*.scss"],
            tasks:['sass','postcss']
        }
    },
    sass :{
        dev: {
            files: {
                "web/css/styles.css" :  "sass/demo.scss"
            }
        }
    },
    postcss :{
        options: {
            processors:[
                require('autoprefixer-core')({browsers:'>5%'})
            ]
        },
        dist: {
            src: 'web/css/*.css'
        }
    },

But the final file doesn't have the prefixes. What am i doing wrong?

[UPDATE]

i tried changing the 

dist: {
   src:
}

to

dist : { files: {}}

but still didn't work is this a bug? i note that no one has tried to use the @keyframes definitions before

[UPDATE]

while running the task postcss:dist I am getting and error

Fatal Error: undefined is not a function

Am i missing something here?

Upvotes: 2

Views: 2814

Answers (3)

smallhours
smallhours

Reputation: 58

The following worked for me:

grunt.initConfig({

  sass: {
    dist: {
      files: {
          'assets/css/style.css': 'assets/sass/style.scss'
      }
    }
  },

  postcss: {
    options: {
      map: true,
      processors: [
        require('autoprefixer')({
          browsers: ['last 2 versions']
        })
      ]
    },
    dist: {
      src: 'assets/css/style.css'
    }
  },

  watch: {
    styles: {
      files: ['assets/sass/*.scss', 'assets/sass/common/*.scss'],
      tasks: ['sass','postcss']
    }
  }

});

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['sass', 'watch']);
grunt.registerTask('default', ['sass', 'postcss']);

Upvotes: 0

wenom64
wenom64

Reputation: 1

You don't have a name of animation

@keyframes zoom{
    from { transform:scale(1); }
      to { transform:scale(2); }
}

Upvotes: -1

srlm
srlm

Reputation: 3226

I think your Grunt file notation is incorrect. Try this:

dist: {
            files: [{
                expand: true,
                cwd: 'web/css/',
                src: ['**/*.css'],
                dest: 'web/css/'
            }]
        }

Upvotes: 3

Related Questions