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'
        }
    },

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

[UPDATE]

我尝试更改

dist: {
   src:
}

到

dist : { files: {}}

但仍然无法工作这是一个错误吗？我注意到没有人试图在

之前使用 @keyframes 定义

[UPDATE]

运行任务时

postcss：dist 我收到错误

致命错误：undefined不是函数

我在这里错过了什么吗？

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); }
}

使用Grunt + PostCSS进行自动修复

3 个答案: