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

Я пытаюсь использовать grunt-postcss с автопрефиксером, но 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'
                }
            }

Что не так?


postcss autoprefixer gruntjs
person David Strauch    schedule 19.01.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это сводило меня с ума последние пару недель, и я только что нашел ответ, который работает для меня. Нашел его в 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'
    }
  }
});
person Robert Pratt    schedule 25.01.2016

arrow_upward
0
arrow_downward

Возможно, вы не установили «автопрефиксер» или его нет в ожидаемой папке.

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

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

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

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

npm install autoprefixer --save-dev

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

person JKVeganAbroad    schedule 21.01.2016
comment
Я установил зависимости с помощью своего пакета, json-файла и получил соответствующую структуру папок, а Autoprefixer создает новые файлы. { "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" } } - person David Strauch; 21.01.2016