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

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/ папка не содержит своего 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'
    }
  }
});