Search code examples
csssassgrunt-contrib-watchlibsass

Autoprefixer: Not adding prefixes


Trying to get autoprefixer working with Grunt, Livereload and node-sass.

I don't seem to be getting anything prefixed.

Below is my Gruntfile.js:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    autoprefixer: {
      options: {
        browsers: ['last 8 versions'],
        map: true
      },
      dist: {
        files: {
          'css/styles.css': 'css/styles.css'
        }
      }
    },

    // Sass to CSS
    sass: {
      app: {
        files: [{
          expand: true,
          cwd: 'scss',
          src: ['*.scss'],
          dest: 'css',
          ext: '.css'
        }]
      },
      options: {
        sourceMap: true,
        outputStyle: 'nested',
        imagePath: "../",
      }
    },

    watch: {
      sass: {
        files: ['scss/{,*/}*.{scss,sass}'],
        tasks: ['sass']
      },
        html: {
        files: ['*.html']
      },
      options: {
        livereload: true,
        spawn: false
      },
      styles: {
        files: ['css/styles.css'],
        tasks: ['autoprefixer']
      }
    },
  });

  // Loads Grunt Tasks
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // Default task(s).
  grunt.registerTask('default', ['autoprefixer','sass', 'watch']);
};

I do see output from my grunt command saying something about a file getting prefixed, but when i open css/styles.css i see no prefixes.

$ grunt
Running "autoprefixer:dist" (autoprefixer) task
>> 1 autoprefixed stylesheet created.

Any ideas?


Solution

  • Order is important...

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

    should be:

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

    Happy monday :)