在 React 应用程序中收到错误“检测到嵌套 CSS，但 CSS 嵌套尚未正确配置”？

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 设置一个普通的 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

配置中。 来源CRA

Tailwind 在其网站上提供的

guide 创建了一个虚拟 postcss.config.js

 - 在此文件中进行更改不会更改实际的 postcss 配置。 （如果有误导的话）

这是目前的一个已知问题 - Adam Wathan（Tailwind 创始人）和 Ian Sutherland（CRA 维护者）之间的

Github 关于 Tailwind 支持 PR 的讨论。但似乎并没有很快修复的打算。

如果你想使用嵌套（或任何 PostCSS 插件），可以使用以下方法从 CRA 中弹出：

npm run eject 弹出后，您可以在

config/webpack.config.js

中找到CRA的postcss配置 - 查找

postcss-loader

。在那里编辑配置可以启用任何 postcss 功能。

PS：启用嵌套时，请注意默认配置中的

postcss-preset-env

。 Tailwind 

要求您编辑配置（如果存在）。

Answer 2

我使用 CRA 并解决了我使用

postinstall

 在 

npm install

 或 

yarn

 之后运行脚本的问题。安装所有依赖项后，该脚本正在更改 CRA 的 Web 包配置（临时解决方案）。
您可以在 

node_modules/react-scripts/config/webpack.config.js

 中找到 Web 包配置。
该脚本将我的 postcss 包添加到实际的 CRA Web 包配置中。

为什么？ CRA 不尊重您的存储库中的任何 postcss 配置

也请查看此评论，了解应该如何使用

postinstall

https://github.com/facebook/create-react-app/issues/2133#issuecomment-347574268.

我还在

tailwindcss/nesting

 之前添加了 

tailwindcss

，因为 tailwind 在看到任何嵌套 css 时会发出警告。该警告阻止了我的 CI，因为 CRA 中的 CI=true 意味着所有警告都被视为错误。

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

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

function replace {
  TARGET_FILE=$1
  PATTERN_TO_FIND=$2
  VALUE_FOR_REPLACEMENT=$3

  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);
});

Answer 4

在终端中运行此命令

npm 安装 postcss postcss-nested --save-dev

在你的 postcss.config.js

    export default {plugins: {
    "tailwindcss/nesting": {},
     tailwindcss: {},
    autoprefixer: {},
  },
};

来源：

https://dev.to/xexiu/nested-css-was-detected-but-css-nesting-has-not-been-configured- Correctly-astro-392k