在Vue-CLI中PostCSS-Preset-Env踩坑记

好的，我将以博文的形式讲述有关在 vue-cli 项目中配置 postcss-preset-env 时踩坑的经历。

随着web开发日新月异，CSS代码也变得更加复杂且不断更新。为了提高工作效率，很多人开始使用CSS预处理器，而postcss是一个强大的CSS预处理器，它可以使用一系列的插件来扩展其功能。ポストCSSプレセットエヌビローンズの一つがpostcss-preset-envであり、CSS変数を自動的にコンパイルして互換性のあるCSSに変換することができる。

关于postcss-preset-env，我希望帮助读者了解有关它的背景知识。几个月前，我根据公司的UI颜色规范（黑白板）整理了一套CSS变量，以便同事们使用，这样就不必每次写颜色的时候根据UI稿反复适配黑白板，直接用一个CSS变量就解决了。我提供的变量表包括了大量常用的颜色值，例如：

--color-primary: #337ab7;
--color-secondary: #5cb85c;
--color-success: #28a745;
--color-info: #17a2b8;
--color-warning: #ffc107;
--color-danger: #d9534f;

将其引入到项目之后，前端开发人员在编写CSS代码时，只需使用这些CSS变量即可，非常方便。然而，在使用一段时间后，我发现了一个问题：当我在CSS文件中使用这些变量时，编译后的CSS代码中并没有出现相应的CSS兼容性前缀。

经过一番调查后，我了解到 PostCSS-Preset-Env 是一个PostCSS插件，可以自动添加CSS兼容性前缀。于是我在项目中安装了它，并且在配置文件中进行了相应的配置。然而，编译后的CSS代码中仍然没有出现CSS兼容性前缀。

经过一番检查后，我发现自己在配置 PostCSS-Preset-Env 时犯了一个错误。在配置文件中，我忘记将 browsers 选项设置为所需的兼容性目标。因此，PostCSS-Preset-Env并没有自动添加CSS兼容性前缀。

吸取教训，我更正了配置，在配置文件中设置了 browsers 选项，指定了所需的兼容性目标。这样，编译后的CSS代码中就出现了相应的CSS兼容性前缀。

通过这次踩坑经历，我深刻地认识到正确配置PostCSS-Preset-Env的重要性。如果你在使用PostCSS-Preset-Env时遇到类似的问题，请检查一下你的配置文件，确保 browsers 选项已设置为所需的兼容性目标。