如何在angular中使用postcss/autoprefixer

Question

我仔细阅读了#1521这个问题的解决方法，但是我仍然不太清楚如何使用postcss/autoprefixer。

我只需要执行npm install autoprefixer --save-dev吗？这是正确的做法吗？

我也阅读了postcss/autoprefixer的文档，但我仍然不知道该如何操作。

请帮忙解答，谢谢！

更新：在使用SCSS时，脚本运行正常。

postcss --parser postcss-scss -u autoprefixer --autoprefixer.browsers \"last 2 versions\" -r src/**/*.scss

- teebo

Answer 1

我已经将 *postcss postcss-cli autoprefixer 安装为开发依赖项。

npm install --save-dev postcss postcss-cli autoprefixer

然后在package.json文件中创建一个npm脚本来运行postcss cli和auto prefixer，如下所示：

"script": {
  ...
   "prefixcss": "postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -r src/**/*.css",
  ...
}

然后在重建之前运行脚本

 npm run prefixcss

- teebo

---

嗨Teebo，我也在寻找此解决方案，只发现你的答案足够清晰易懂以供实现，但当我运行npm run prefixcss时，出现以下错误：cross@1.1.0 prefixcss C:\PROJECTS\cross\weblisting

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -r src/**/*.scss

TypeError：模式必须是字符串或字符串数组 npm ERR！代码ELIFECYCLE npm ERR！错误号1 npm ERR！cross@1.1.0 prefixcss：postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -r src/**/*.scss npm ERR！退出状态1 - Always_a_learner

@Simer 你是在使用 Windows 吗？ 如果是的话，请尝试以下命令： postcss -u autoprefixer --autoprefixer.browsers "last 2 versions" -r src/**/*.css - Thabo

如果需要的话，请尝试： postcss -u autoprefixer --autoprefixer.browsers "last 2 versions" -r src/**/*.css - Thabo

谢谢Teebo。是的，我正在使用Windows。明天到达工作场所后，我会尝试这个解决方案。如果我有scss文件而不是css，这个方法还能行得通吗？实际上，我正在使用Angular 5，并希望在IE浏览器中看到autoprefixer效果。因为我已经使用了flexbox和grid布局。但是今天我已经检查过了，发现autoprefixer已经在我的项目中起作用了，前缀并不能真正解决问题。你是否曾经遇到过跨浏览器CSS的这种问题？感谢您的时间。 :) - Always_a_learner

@Simer 如果你的文件是scss，那么你需要安装postcss-scss：npm install --save-dev postcss-scss。是的，我也遇到过这样的问题，我通常会去微软网站搜索。这里是一个链接： https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/?page=1&q=flexbox使用关键字搜索您的问题，并在SO和其他网站上尝试搜索解决方案，在这里也进行一些搜索：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox - Thabo

Answer 2

据我所知，从Angular v11.2开始，PostCSS已经被添加到angular cli中。自动前缀也已默认启用。 如果你想配置PostCSS，只需创建一个postcss.config.js文件即可。

- Vahid

---

在 Angular 文档中我可以在哪里找到这个？ - Thabo

@teebo 很遗憾，关于这个问题目前没有文档。但是你可以在这里查看webpack配置（https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts）。我也测试了一些CSS，并且根据我的`.browserslistrc`文件，它是有效的。 - Vahid

我对 postcss.config.js 文件不太确定！我刚在 Reddit 上读了一些帖子。 - Vahid

好的，我明白了，谢谢分享。 - Thabo