如何在角度中使用 postcss/autoprefixer答案

【问题标题】：How do I use postcss/autoprefixer in angular如何在角度中使用 postcss/autoprefixer
【发布时间】：2022-01-18 18:46:53
【问题描述】：

我已阅读问题#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

【问题讨论】：

标签： angular postcss autoprefixer

【解决方案1】：

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

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

然后在 package.json 文件中创建一个 npm 脚本来像这样运行 postcss cli 和自动前缀

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

然后在我重建之前运行脚本

 npm run prefixcss

【讨论】：

嗨 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: Patterns must be a string or an array of strings npm ERR!代码 ELIFECYCLE npm 错误！ errno 1 npm 错误！ cross@1.1.0 前缀css：postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -r src/**/*.scss npm ERR！退出状态 1
@Simer 你在 Windows 上工作吗？如果是这样，请尝试以下操作： postcss -u autoprefixer --autoprefixer.browsers \"last 2 versions\" -r src/**/*.css
如果是这样，试试：postcss -u autoprefixer --autoprefixer.browsers \"last 2 versions\" -r src/**/*.css
谢谢 teebo。是的，我正在使用 Windows。明天到达我的工作场所后，我将尝试此解决方案。如果我有 scss 文件而不是 css，这会起作用吗？实际上我正在使用 Angular 5 并希望看到 IE 浏览器的自动前缀效果。因为我使用了 flexbox 和网格布局。但是我今天检查了 autoprefixer 已经在我的项目中工作，并且前缀并没有真正解决问题。你有没有遇到过跨浏览器 css 的问题？谢谢你的时间。 :)
@Simer 如果你的文件是 scss 那么你需要安装 postcss-scss npm install --save-dev postcss-scss。是的，我遇到过这样的问题，我通常去MS网站搜索，这是一个链接：developer.microsoft.com/en-us/microsoft-edge/platform/issues/…使用关键字搜索您的问题，并尝试在SO和其他网站中搜索解决方案，做一些搜索也在这里：developer.mozilla.org/en-US/docs/Web/CSS/…

【解决方案2】：

AFAIK 从 Angular v11.2 开始，PostCSS 已经添加到 angular cli 中。自动前缀也是开箱即用的。

如果你想配置 PostCSS，只需创建一个postcss.config.js 文件。

【讨论】：

在 Angular 文档中哪里可以找到？
@teebo 不幸的是，没有关于此的文档。但是可以看到webpack配置here。我自己也测试了一些 CSS，它根据我的 .browserslistrc 文件工作。
我不确定postcss.config.js 文件！我刚刚在 Reddit 上阅读了一些关于此的帖子。
好的，谢谢分享