0

I'm trying to use grunt-postcss with autoprefixer but the css is not getting prefixed. Autoprefixer creates new files, but not prefixed. There is no Error.

Here is my gruntfile: 

            postcss: {
                options: {
                    map: true,
                    processors: [
                        require('autoprefixer')({
                            browsers: ['last 2 versions']
                        })
                    ]
                },
                files: {
                    '<%= pathBuild %>/<%= pathAssets %>/<%= pathRio %>/css/rio-layout.prefixed.css': '<%= pathBuild %>/<%= pathAssets %>/<%= pathRio %>/css/rio-layout.css',
                    '<%= pathBuild %>/<%= pathAssets %>/<%= pathRio %>/css/theme.prefixed.css': '<%= pathBuild %>/<%= pathAssets %>/<%= pathRio %>/css/theme.css'
                }
            }

What's wrong?

David Strauch
  • 147
  • 2
  • 11

2 Answers2

0

Perhaps you haven't installed "autoprefixer", or it's not in the expected folder.

Ensure your node_modules/ folder has a similar file tree to this:

node_modules/
├── autoprefixer/
│   └── . . .
├── postcss/
│   └── . . .
└── . . .

If you find autoprefixer/ is missing, you will need to install it.

Another possibility is that you've installed autoprefixer without its dependencies (e.g. the autoprefixer/ folder doesn't contain its own node_modules/ folder). Correct this by reinstalling it with the following command:

npm install autoprefixer --save-dev

Although unlikely, you may need to run the above command with postcss as well

JKVeganAbroad
  • 169
  • 1
  • 1
  • 11
  • I installed the dependencies with my package,json-file and get the appropriate folder structure and Autoprefixer creates new files. `{ "name": "***", "version": "1.1.0", "description": "***", "keywords": [ "*" ], "author": "***", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-clean": "latest", "grunt-contrib-concat": "latest", "grunt-contrib-copy": "latest", "grunt-contrib-less": "latest", "grunt-postcss": "latest", "autoprefixer": "latest", "grunt-contrib-uglify": "latest", "grunt-contrib-watch": "latest" } }` – David Strauch Jan 21 '16 at 07:14
0

This has been making me crazy off and on for the past couple of weeks, and I just found an answer that works for me. Found it in the Bootstrap Gruntfile.js. Here's what I think the problem is:

With the example grunt-postcss example, maybe 'last 2 versions' in the browsers option is a placeholder. When I substituted in the browsers array from the Bootstrap Gruntfile.js, my postcss output prefixes started matching the Bootstrap dist css file's prefixes. Here's the full config I used:

grunt.initConfig({
  postcss: {
    options: {
      map: {
          inline: false,
      },

      processors: [
        require('autoprefixer')([
          "Android 2.3",
          "Android >= 4",
          "Chrome >= 20",
          "Firefox >= 24",
          "Explorer >= 8",
          "iOS >= 6",
          "Opera >= 12",
          "Safari >= 6"
        ]),
      ]
    },
    dist: {
      src: 'css/*.css'
    }
  }
});
Robert Pratt
  • 23
  • 5