使用 Grunt + PostCSS 自动添加前缀答案

【问题标题】：Autoprefixing using Grunt + PostCSS使用 Grunt + PostCSS 自动添加前缀
【发布时间】：2015-06-20 22:23:40
【问题描述】：

我正在使用 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 我收到错误

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

我错过了什么吗？

【问题讨论】：

是不是我需要在我的 sass 前面加上一些符号才能让它识别前缀样式属性？我尝试使用“：”，但 sass 遇到错误
我没有使用@keyframes，但我遇到了同样的问题。我已经让任务运行没有错误，但没有应用前缀。

标签： css sass gruntjs gruntfile

【解决方案1】：

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

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

【讨论】：

【解决方案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']);

【讨论】：

【解决方案3】：

你没有动画的名字

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

【讨论】：

虽然这是真的，但 Sass 不会在 OP 发布的代码中引发错误。由于 Autoprefixer 很乐意为无效的关键帧声明添加前缀（在 codepen 上测试），我发现这不太可能是答案。