Rails 6 和 TailwindCSS 的 PostCSS 插件错误答案

【问题标题】：PostCSS Plugin errors with Rails 6 and TailwindCSSRails 6 和 TailwindCSS 的 PostCSS 插件错误
【发布时间】：2021-03-02 08:06:46
【问题描述】：

有一个使用 TailwindCSS 1.9 版的新 rails 6.0.3.4 应用程序。刚刚尝试升级到最新的 TailwindCSS 版本，我收到以下错误：

ERROR in ./app/javascript/stylesheets/application.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./app/javascript/stylesheets/application.scss)

Module build failed (from ./node_modules/postcss-loader/src/index.js):

Error: PostCSS plugin tailwindcss requires PostCSS 8.

Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

尝试运行时此错误仍然存在

bin/webpack

找不到有关如何升级到 PostCSS 版本 8 的任何信息。

【问题讨论】：

这是因为 Rails 在某些部分仍然使用PostCSS version 7 解决方案是使用与PostCSS 7 兼容的tailwind@tailwindcss.com/docs/…

标签： ruby-on-rails webpack tailwind-css

【解决方案1】：

这是一个很好的漫游here

我已经设法跳过了 postcss 和 jit 的全人类版本。这些是我在 package.json 中的依赖项（我在 FE 使用 vue）：

"@rails/webpacker": "^5",
"autoprefixer": "^10",
"css-loader": "^5",
"node-sass": "^5.0.0",
"postcss": "^8",
"postcss-loader": "^4",
"sass-loader": "^10",
"tailwindcss": "^2",
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"vue-turbolinks": "^2.2.2",
"vuex": "^3.6.2",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"

此时您仍然会收到错误消息。为了让它工作，需要将重要的 config/hack 添加到 config/environment.js （感谢撰写上面链接文章的 David Morales）：

function hotfixPostcssLoaderConfig (subloader) {
  const subloaderName = subloader.loader
  if (subloaderName === 'postcss-loader') {
    if (subloader.options.postcssOptions) {
      console.log(
        '\x1b[31m%s\x1b[0m',
        'Remove postcssOptions workaround in config/webpack/environment.js'
      )
    } else {
      subloader.options.postcssOptions = subloader.options.config;
      delete subloader.options.config;
    }
  }
}

environment.loaders.keys().forEach(loaderName => {
  const loader = environment.loaders.get(loaderName);
  loader.use.forEach(hotfixPostcssLoaderConfig);
});

这是因为 PostCSS 在版本 8 中使用了不同的 Api 结构，所以才会出现此错误。

然后您可以按照他们网站或其他文章中的顺风设置说明进行操作。

【讨论】：

【解决方案2】：

我在将其用于 Heroku 的生产中时遇到了问题。我尝试了现有的纱线答案，但它们都不适合我。

对我有用的是：
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

一旦我提交并推送了package.json 和yarn.lock，它就可以愉快地编译了。

该命令是从this helpful Rails/Tailwind tutorial 提取的。

【讨论】：

谢谢！这对我有用。不确定我们什么时候可以将 PostCSS 8 与 Rails 6 一起使用？

【解决方案3】：

为了让最新版本的 Tailwind 配置为在 Rails 6.0.3.4 上与 PostCSS 8 一起工作，我做了一些事情

确保您使用的是 Webpacker 的最新分支。根据最新的 PR 提交（截至 2020 年 11 月 27 日），我们可以看到有人对 yarn.lock 进行了更新。您可以通过添加到您的 gemfile gem webpacker, git: 'https://github.com/rails/webpacker.git' 来做到这一点
确保您的软件包库是最新的。 PostCSS 依赖于一些包依赖项，例如 postcss-loader 和 autoprefixer。我的许多包都过时了，不支持 postcss8。要了解你的包的最新版本，你可以查看 yarn.lock，升级包你可以yarn upgrade postcss-loader --latest
出于某种原因，我发现 autoprefixer^10 目前无法与 postcss 8 一起使用。但是，您可以使用 autoprefixer^9。 yarn remove autoprefixer 然后yarn add autoprefixer@^9
如果您仍然遇到问题，那么您应该考虑使用Tailwind team 提供的解决方案。它让你保持在 postcss7，但据我所知，一切仍然正常。

【讨论】：

【解决方案4】：

yarn remove tailwindcss

yarn add tailwindcss@compat

bin/webpack

这为我解决了问题，让我可以使用 tailwindcss 2。Tailwind 发布了与 PostCSS7 兼容的版本。

【讨论】：

【解决方案5】：

我在使用全新的 Rails 6.1 RC1 应用程序和 Tailwind CSS 2 时遇到问题。我安装了 PostCSS 8，但在控制台中仍然收到错误消息。我最终在 Tailwind CSS 文档中找到了这个，与 Grant 在他的回答中发布的链接相同：

从 v2.0 开始，Tailwind CSS 依赖于 PostCSS 8。因为 PostCSS 8 是只有几个月大，生态系统中的许多其他工具还没有尚未更新，这意味着您可能会看到如下错误：

错误：PostCSS 插件 tailwindcss 需要 PostCSS 8。

为了帮助弥合差距，直到每个人都更新，我们还发布了在 npm 的 compat 频道下构建 PostCSS 7 兼容性。

https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

我运行以下命令以使用 Yarn 安装兼容 PostCSS 7 的 Tailwind CSS v2.0 版本：

yarn add tailwindcss@comp

一旦 PostCSS 8 得到更多支持，我们可以切换回 tailwindcss@latest。

作为参考，我在控制台中看到的错误如下：

// Before upgrading PostCSS

Error: PostCSS plugin tailwindcss requires PostCSS 8.


// After upgrading to PostCSS 8

ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
- options has an unknown property 'config'. These properties are valid:
   object { postcssOptions?, execute?, sourceMap? }

【讨论】：

【解决方案6】：

通过几个步骤解决了这个问题。

遵循 TailwindCSS 安装说明https://tailwindcss.com/docs/installation

第一个建议是使用命令

npm install tailwindcss postcss autoprefixer

但后来还是得到了本质的错误

Error: PostCSS plugin tailwindcss requires PostCSS 8.

目前似乎没有办法解决这个问题

使用 TailwindCSS 安装指南https://tailwindcss.com/docs/installation#postcss-7-compatibility-build 中的进一步说明

该过程是然后应用以下命令：

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@compat postcss@^7 autoprefixer@^9

然后将 PostCSS 和 autoprefixer 组件降级，然后当 bin/webpack 重新运行时终于成功。

【讨论】：