css - 使用 Grunt + PostCSS 自动添加前缀

Question

我正在使用 Sass，而不是创建一个 mixin，而是尝试使用 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'
        }
    },

但最终文件没有前缀。我究竟做错了什么？

[更新]

我试着改变

dist: {
   src:
}

至

dist : { files: {}}

但仍然没有工作这是一个错误吗？我注意到之前没有人尝试过使用@keyframes定义

[更新]

在运行任务postcss:dist时出现错误

致命错误：未定义不是函数

我在这里错过了什么吗？

Answer 1

我认为您的 Grunt 文件符号不正确。尝试这个：

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

Answer 2

以下对我有用：

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

Answer 3

你没有动画的名字

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