grunt-postcss autoprefixer не добавляет префиксы, но создает новые файлы

Question

Я пытаюсь использовать grunt-postcss с autoprefixer, но css не получает префикса. Autoprefixer создает новые файлы, но не префикс. Ошибка отсутствует.

Вот мой 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' 
       } 
      } 

Что случилось?

Answer 1

Возможно, у вас не установлено «autoprefixer», или оно не находится в ожидаемой папке.

Убедитесь, что ваша папка node_modules/ имеет аналогичное дерево файлов для этого:

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

Если вы нашли autoprefixer/ отсутствует, вам нужно будет установить его.

Другая возможность заключается в том, что вы установили autoprefixer без его зависимостей (например, папка autoprefixer/ не содержит свою собственную папку node_modules/). Исправьте это, переустановить его с помощью следующей команды:

npm install autoprefixer --save-dev 

Хотя вряд ли, возможно, потребуется выполнить вышеуказанную команду с postcss, а

Answer 2

Это было сводит меня с ума от и за последние пару недель, и я нашел ответ, который работает для меня. Найденный в Bootstrap Gruntfile.js. Вот что я думаю, проблема:

С примером примера grunt-postcss, возможно, «последние 2 версии» в опции браузеров является заполнителем. Когда я заменил в массиве браузеров из Bootstrap Gruntfile.js, мои префиксы вывода postcss начали соответствовать префиксам файла Bootstrap dist css. Вот полная конфигурация, которую я использовал:

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' 
    } 
    } 
});