Grunt grunt-postcss Autoprefixer 不工作

Question

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

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

配置：

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

任务顺利执行：

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

Done.

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

原项目（我fork出来的）可以在这里找到： https://github.com/faforever/website

Answer 1

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

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

Answer 2

以下似乎成功...

还原为原始文件

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

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

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

---

postcss

的任务设置

2. 创建一个名为postcss.js的新文件并将其保存到名为[=76的文件夹中=]g运行t在项目目录下。 （由于该项目的许多其他任务都作为单独的 .js 文件存在，我们也将对这个新任务执行相同的操作）。

postcss.js的内容应该如下：

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

---

Gruntfile.js

3. 接下来，更新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);.[=35 的行加载的=]

---

更新watch.js

4. watch.js文件中名为sass的任务，在中找到g运行t文件夹，更新如下：

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

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

后应用前缀

---

补充说明：

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

$ npm install autoprefixer --save-dev

2. 现在当您 运行 $ grunt serve （...并将任何编辑保存到 .scss 文件） 或 $ grunt prod 结果 .css 文件将包含所需的供应商前缀。

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