Grunt grunt-postcss Autoprefixer 不工作

Question

我加入了一个非盈利的开源项目，想帮忙一点，但我不熟悉 Grunt。我做了一些研究，但无法弄清楚为什么配置不起作用。

这是我正在尝试使用的插件。它允许应用多个后处理器，但我现在只需要 Autoprefixer： https://github.com/nDmitry/grunt-postcss

配置：

• Gruntfile.jshttp://pastebin.com/4Ud0sa1W
• grunt/concurrent.jshttp://pastebin.com/Satr1wSK
• grunt/sass.jshttp://pastebin.com/rc6evWas
• grunt/watch.jshttp://pastebin.com/eGBpFSLs

任务执行没有问题：

laptop:website lextoc$ grunt sass:postcss
Running "sass:postcss" (sass) task

Done.

但是 css 文件没有获得所需的供应商前缀，我正在使用 display: flex 来检查它是否有效。

可以在这里找到原始项目（我分叉了它）： https://github.com/faforever/website

Answer 1

以下似乎工作成功...

还原为原始文件

1. 首先，我建议您将所有代码示例（即您为其提供 pastebin 的示例）还原为可以在您派生的 github 存储库中找到的原始代码版本*。即以下文件：

   1. Gruntfile.js
   2. grunt/concurrent.js
   3. grunt/sass.js
   4. grunt/watch.js

* 恢复到原始版本只会更容易执行以下步骤。

---

postcss 的任务设置

1. 新建一个名为postcss.js的文件，并将其保存到项目中名为grunt的文件夹中目录。 （由于该项目的许多其他任务都作为单独的 .js 文件存在，我们也会为这个新文件做同样的事情）。

postcss.js的内容应该如下：

module.exports = {
    prefix: {
        options: {
            processors: [
                require('autoprefixer')({ browsers: ['last 8 versions', 'ie 9'] })
            ]
        },
         src: './public/styles/css/*.css'
    }
};

---

Gruntfile.js

1. 接下来，更新Gruntfile.js中名为prod的现有注册任务，如下：

// ...
grunt.registerTask('prod', [
    'sass:dist',
    'postcss:prefix',
    'concat:js',
    'uglify:dist'
]);
// ...

注意在TaskList 数组中添加'postcss:prefix'。此外，不需要添加grunt.loadNpmTasks('grunt-postcss');，因为任务是通过读取require('load-grunt-tasks')(grunt); 的行加载的。

---

更新 watch.js

4. watch.js 文件中名为 sass 的任务，位于 grunt 文件夹中，应更新如下：

// ...
sass: {
    files: ['public/styles/**/*.scss'],
    tasks: ['sass:dev', 'postcss:prefix']
},
// ...

注意将'postcss:prefix' 添加到tasks 数组中。这将确保在将 .scss 文件转换为 .css 后应用前缀。

---

补充说明：

1. 您可能还需要将autoprefixer 添加到您的包中：

$ npm install autoprefixer --save-dev

1. 现在，当您运行$ grunt serve （...并保存对.scss 文件的任何编辑） 或$ grunt prod 时，生成的.css 文件将包含所需的供应商前缀。

2. 运行 $ grunt sass:postcss 不再适用。

Answer 2

有同样的问题。你试试这个：

postcss: {
    options: {
      processors: [
        require('autoprefixer')({browsers: ['last 8 versions', 'ie 9']})
      ]
    },
    src: 'public/styles/css/*.css'
  }