在 React 应用程序中收到错误 "Nested CSS was detected, but CSS nesting has not been configured correctly"？

Question

我一直在将我的 CRA 项目升级到 TailwindCSS 3，但现在 CSS 嵌套不再有效。启动服务器后，控制台显示：

(8:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting

但是，我看不出必须做些什么来纠正这个问题。我已经尝试使用 Tailwind（遵循 this guide）设置一个普通的 CRA 项目，只是为了确保我没有冲突，但仍然没有成功。

postcss.config.js:

module.exports = {
  plugins: {
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

如您所见，我在Tailwind之前添加了嵌套插件。在我看来，好像没有检测到任何插件。我也尝试用 postcss-nesting 替换它，结果相同。

注意：我也尝试过使用数组语法 require('tailwind/nesting')，就像指南建议的那样。

有趣的是，从 postcss.config.js 中删除所有插件（或使用无法解决的 require）仍然会输出相同的错误，这意味着不需要此文件来加载 Tailwind。也许我遗漏了导致整个 postcss.config.js 文件无法首先加载的内容？

index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

ReactDOM.render(
  <React.StrictMode>
    <div className="a">
      aaa
      <div className="b">bbb</div>
    </div>
  </React.StrictMode>,
  document.getElementById("root")
);

index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

.a {
  @apply text-blue-500;

  .b {
    @apply text-green-500;
  }
}

package.json：（为简洁起见省略了内容）

{
  "name": "tailwindtest",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.12"
  }
}

Answer 1

这主要是个坏消息。

Create React App 的 Tailwind 支持意味着他们将在项目中检测 tailwind.config.js 并将 tailwindcss 添加到他们现有的 postcss 配置中。 Source in CRA

Tailwind 在其网站上提供的 guide 创建了一个虚拟 postcss.config.js - 在此文件中进行更改不会更改实际的 postcss 配置。（如果有误导的话）

这是目前已知的问题 - Github discussion on Tailwind support PR Adam Wathan（Tailwind 创始人）和 Ian Sutherland（CRA 维护者）之间。但似乎没有很快修复的打算。

如果你想使用嵌套（或任何真正的 PostCSS 插件）是使用以下方式从 CRA 中弹出：

npm run eject

弹出后，您可以在 config/webpack.config.js 中找到 CRA 的 postcss 配置 - 查找 postcss-loader。在那里编辑配置可以启用任何 postcss 功能。

PS：启用嵌套时注意默认配置中的postcss-preset-env。 Tailwind requires you 编辑配置（如果存在）。

Answer 2

我使用 CRA 并修复我在 npm install 或 yarn 之后使用 postinstall 到运行脚本的问题。安装所有依赖项后，该脚本正在更改 CRA 的 web pack 配置（临时解决方案）。您可以在 node_modules/react-scripts/config/webpack.config.js 中找到 web pack 配置。该脚本将我的 postcss 包添加到实际的 CRA Web 包配置中。

为什么？ CRA 不尊重您的 repo

中的任何 postcss 配置

另请查看此评论，了解您应该如何使用 postinstall https://github.com/facebook/create-react-app/issues/2133#issuecomment-347574268。

我还在 tailwindcss 之前添加了 tailwindcss/nesting，因为 Tailwind 在看到任何嵌套的 css 时会发出警告。该警告阻止了我的 CI，因为 CRA 中的 CI=true 意味着所有警告都被视为错误。

这是运行我的存储库中的脚本。

FILE="node_modules/react-scripts/config/webpack.config.js"

function replace {
  TARGET_FILE=
  PATTERN_TO_FIND=
  VALUE_FOR_REPLACEMENT=

  OLD_FILE_CONTENT=$(cat "$TARGET_FILE")  # we need to collect the content of the file so we can overwrite it in the next command
  echo "$OLD_FILE_CONTENT" | sed -e "s/$PATTERN_TO_FIND/$VALUE_FOR_REPLACEMENT/g" > "$TARGET_FILE"
}

# add postcss-nesting
replace "$FILE" "'postcss-flexbugs-fixes'," "'postcss-flexbugs-fixes','postcss-nesting',"

# add tailwind/nesting
replace "$FILE" "'tailwindcss'," "'tailwindcss\/nesting', 'tailwindcss',"

Answer 3

根据@aricma 的回答，如果您在父目录上创建一个 script.js 文件（与 package.json 相同）并将其添加到 package.json

上会更容易

  "scripts": { 
    "postinstall": "node script.js",
    ...
  }

和这个 script.js

const fs = require('fs');

fs.readFile('node_modules/react-scripts/config/webpack.config.js', 'utf8', (err, data) => {
  if (err) {
    return console.log(err);
  }
  const result = data.replace("'postcss-flexbugs-fixes',", "'postcss-flexbugs-fixes','postcss-nesting',").replace("'tailwindcss',", "'tailwindcss/nesting', 'tailwindcss',");

  fs.writeFile('node_modules/react-scripts/config/webpack.config.js', result, 'utf8', (err) => {
    if (err) {
      return console.log(err);
    }
    return console.log(true);
  });
  return console.log(true);
});

在 React 应用程序中收到错误 "Nested CSS was detected, but CSS nesting has not been configured correctly"？

Getting the error "Nested CSS was detected, but CSS nesting has not been configured correctly" in React app?

reactjs

postcss

tailwind-css