我的 PostCSS 插件在 Vue-cli 3 项目中不起作用

Posted 2023-03-06

【中文标题】我的 PostCSS 插件在 Vue-cli 3 项目中不起作用

【英文标题】：My PostCSS plugin does not work in a Vue-cli 3 project

【发布时间】：2021-10-17 00:21:52

【问题描述】：

所以我写了这个我想要使用的 postcss 插件。我根据 postcss 指南对其进行了测试，在我尝试在实际项目中使用它之前，它按预期工作。

这是 GitHub 上的 plugin

我正在尝试在 Vue-cli 应用程序 (Webpack) 中使用它。

我使用npm install 安装了插件。我也安装了 postcss 和 postcss-loader（我尝试了不同的版本，重新安装，但没有运气）

这是我的 postcss.config.js

module.exports = 
  plugins: [
    require("postcss-vwh"),
    //...
  ],
;

更新

好的，所以我创建了一个新的最小应用程序（没有 vue，只有 Webpack 5，css-loaders 包括最新版本的 postcss 和插件）并且它按预期工作！

所以显然问题不在于我的插件，而在于 vue-cli。经过数小时的尝试使其工作后，我得到了以下错误消息：

Syntax Error: Error: PostCSS plugin postcss-vwh requires PostCSS 8.

研究表明，这个错误可以通过升级 postcss-loader 来修复，但我被 vue-cli 强制使用版本 4，这是与 Webpack 4 兼容的最后一个版本，我的 vue-cli 应用程序在该版本上运行。

那么，有没有什么办法可以让我的插件不那么苛刻，可能需要较低版本的 postcss，所以它可以与 Webpack 4 一起使用？

【参考方案1】：

所以我从 PostCSS here 的创建者那里得到了答复，基本上是说，不建议尝试支持旧的 postcss 版本。最好的方法是更新 postcss。

所以我所做的就是和 vue-cli 说再见，从头开始手动创建一个新的 Webpack 5 / vue 应用程序，在那里复制我所有的东西，安装 postcss 8，现在它可以工作了。