Grunt grunt-postcss Autoprefixer not working

Question

I've jumped into a non-profit open source project and wanted to help out a little bit but I'm unfamiliar with Grunt. I did some research and can't figure out why the configuration isn't working.

Here's the plugin I'm trying to use. It allows applying several postprocessors but I just need Autoprefixer for now: https://github.com/nDmitry/grunt-postcss

The configuration:

• Gruntfile.js http://pastebin.com/4Ud0sa1W
• grunt/concurrent.js http://pastebin.com/Satr1wSK
• grunt/sass.js http://pastebin.com/rc6evWas
• grunt/watch.js http://pastebin.com/eGBpFSLs

The task gets executed without a problem:

laptop:website lextoc$ grunt sass:postcss
Running "sass:postcss" (sass) task

Done.

But the css file doesn't get the required vendor prefixes, I'm using display: flex to check if it works.

The original project (I forked it) can be found here: https://github.com/faforever/website

Answer 1

The following seems to work successfully...

Revert to the original files

1. Firstly, I recommend that you revert all code samples, (i.e. those that you provided a pastebin for), to the original code versions that can be found in the github repo that you forked*. Namely the following files:

   1. Gruntfile.js
   2. grunt/concurrent.js
   3. grunt/sass.js
   4. grunt/watch.js

* Reverting to the original versions will just make it easier to carry out the following steps.

---

Task setup for postcss

2. Create a new file named postcss.js and save it to the folder named grunt in the project directory. (As many of the other Tasks for the project exist as separate .js files we'll do the same for this new one too).

The content of postcss.js should be as follows:

module.exports = {
    prefix: {
        options: {
            processors: [
                require('autoprefixer')({ browsers: ['last 8 versions', 'ie 9'] })
            ]
        },
         src: './public/styles/css/*.css'
    }
};

---

Gruntfile.js

3. Next, update the existing registered task named prod in Gruntfile.js as follows:

// ...
grunt.registerTask('prod', [
    'sass:dist',
    'postcss:prefix',
    'concat:js',
    'uglify:dist'
]);
// ...

Note the addition of 'postcss:prefix' in the TaskList array. Also, it's not necessary to add grunt.loadNpmTasks('grunt-postcss'); because the tasks get loaded via the line reading require('load-grunt-tasks')(grunt);.

---

Update watch.js

4. The task named sass in the watch.js file, found in the grunt folder, should be updated as follows:

// ...
sass: {
    files: ['public/styles/**/*.scss'],
    tasks: ['sass:dev', 'postcss:prefix']
},
// ...

Note the addition of 'postcss:prefix' added to the tasks array. This will ensure the prefixes are applied after the .scss files have been converted to .css.

---

Additional notes:

1. You may also need to add autoprefixer to your package too:

$ npm install autoprefixer --save-dev

2. Now when you run either $ grunt serve (...and save any edits to the .scss files) or $ grunt prod the resultant .css files will include the required vendor prefixes.

3. Running $ grunt sass:postcss is no longer applicable.