Skip to content

Instantly share code, notes, and snippets.

@jshawl
Last active January 18, 2023 13:52
Show Gist options
  • Save jshawl/6225945 to your computer and use it in GitHub Desktop.
Save jshawl/6225945 to your computer and use it in GitHub Desktop.
Grunt + Sass + Autoprefixer
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options:{
style:'compressed'
},
files: {
'css/style.css' : 'scss/style.scss'
}
}
},
autoprefixer:{
dist:{
files:{
'css/style.css':'css/style.css'
}
}
},
watch: {
css: {
files: 'scss/*.scss',
tasks: ['sass', 'autoprefixer']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default',['watch']);
}
{
"name": "jshawl.com",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-sass": "~0.3.0",
"grunt-contrib-watch": "~0.4.4",
"grunt-autoprefixer": "~0.2.20130806"
}
}
@jstnrs
Copy link

jstnrs commented Apr 8, 2015

Solution
enable sourcemaps in sass:

sass: {
  dist: {
    options: {
      sourcemap: true
    },
    files: {
      'style/css/master.css': 'style/sass/master.sass'
    }
  }
}

update sourcemaps with autoprefixer:

autoprefixer: {
  dist: {
    options: {
      map: true
    },
    files: {
      'style/css/master.css': 'style/css/master.css'
    }
  }
}

@manfromanotherland
Copy link

This helped me a lot, thanks! The only change is that I'm using postcss with autoprefixer-core instead of grunt-autoprefixer, which has been deprecated in favour of grunt-postcss:

postcss: {
    options: {
        processors: require('autoprefixer-core')({browsers: 'last 2 versions'}),
    },
    dist: {
        src: 'css/*.css',
    },
},

@guillaumebarranco
Copy link

Very very nice ! Was looking for how to make the three together simply and now that's perfect for it, thanks !

@wentin
Copy link

wentin commented May 4, 2016

this is awesome! Save me so much time and make grunt less puzzling.

@rbk
Copy link

rbk commented Jul 22, 2016

Very helpful, thank you!

@dimitriadisg
Copy link

Following up on @EdmundoJr's comment, autoprefixer-core has been deprecated as well, use autoprefixer instead (just replace autoprefixer-core with autoprefixer)

@petertwise
Copy link

Thanks to this gist a few years ago I finally grasped enough to get my sweet Grunt setup running. Thank you!
Here's my updated version for 2018:
https://gist.github.com/squarecandy/a27671c96f3d226e0d4b9a118bfd1314

  • using grunt-sass and node-sass to avoid ruby dependency
  • using "plain" autoprefixer as suggested above
  • spits out valid source maps, which can be a challenge to get working with a sass > autoprefixer pipeline...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment