Autoprefixing с помощью Grunt + PostCSS

Я использую Sass и вместо того, чтобы создавать подмешать Я пытаюсь использовать черновую-postcss добавить свои префиксы на моих определениях классов ...Autoprefixing с помощью Grunt + PostCSS

это мой CSS

@keyframes { 
    from { transform:scale(1); } 
     to { transform:scale(2); } 
}

Мой gruntfile

watch:{ 
     sass: { 
      files: ["sass/partials/*.scss","sass/*.scss"], 
      tasks:['sass','postcss'] 
     } 
    }, 
    sass :{ 
     dev: { 
      files: { 
       "web/css/styles.css" : "sass/demo.scss" 
      } 
     } 
    }, 
    postcss :{ 
     options: { 
      processors:[ 
       require('autoprefixer-core')({browsers:'>5%'}) 
      ] 
     }, 
     dist: { 
      src: 'web/css/*.css' 
     } 
    },

Но конечный файл не префиксы. Что я делаю не так?

[UPDATE]

я попытался изменить

dist: { 
    src: 
}

dist : { files: {}}

, но до сих пор не работает это ошибка? Хочу отметить, что никто не пытался использовать @keyframes определения перед тем

[UPDATE]

при выполнении задачи postcss: расстояние я получаю и ошибка

Fatal Error: undefined is not a function

Am я что-то здесь отсутствует?

источник

2015-06-20 Kendall

ли, что мне нужно предварять некоторые обозначения моей дерзости заставить его распознавать свойства стиля префикса? Я попытался использовать «:», но sass запустил ошибку – Kendall

Я не использую '@ keyframes', но у меня такие же проблемы. Я получил задачу запускать без ошибок, но префиксы не применялись. –

Я думаю, что ваши записи в формате Grunt неверны. Попробуйте это:

dist: { 
      files: [{ 
       expand: true, 
       cwd: 'web/css/', 
       src: ['**/*.css'], 
       dest: 'web/css/' 
      }] 
     }

источник

2015-06-23 14:08:04 srlm

-1

Вы не имя анимации

@keyframes zoom{ 
    from { transform:scale(1); } 
     to { transform:scale(2); } 
}

источник

2015-08-25 22:04:28 wenom64

Хотя это правда, Sass не вызывает ошибку с кодом, отправленным OP. Поскольку Autoprefixer с радостью будет префикс недопустимых объявлений ключевых кадров (проверен на codepen), я считаю маловероятным, что это ответ. – cimmanon

Следующие работал для меня:

grunt.initConfig({ 

    sass: { 
    dist: { 
     files: { 
      'assets/css/style.css': 'assets/sass/style.scss' 
     } 
    } 
    }, 

    postcss: { 
    options: { 
     map: true, 
     processors: [ 
     require('autoprefixer')({ 
      browsers: ['last 2 versions'] 
     }) 
     ] 
    }, 
    dist: { 
     src: 'assets/css/style.css' 
    } 
    }, 

    watch: { 
    styles: { 
     files: ['assets/sass/*.scss', 'assets/sass/common/*.scss'], 
     tasks: ['sass','postcss'] 
    } 
    } 

}); 

grunt.loadNpmTasks('grunt-contrib-sass'); 
grunt.loadNpmTasks('grunt-postcss'); 
grunt.loadNpmTasks('grunt-contrib-watch'); 

grunt.registerTask('default', ['sass', 'watch']); 
grunt.registerTask('default', ['sass', 'postcss']);

источник

2016-07-11 00:14:57 smallhours

Autoprefixing с помощью Grunt + PostCSS

ответ

Смежные вопросы