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

Question

我一直在将我的CRA项目升级到TailwindCSS3，但现在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项目，只是为了确保我没有冲突，但仍然没有成功。

postss.config.js:

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

正如你所看到的，我在Tailwind之前添加了嵌套插件。在我看来，插件似乎根本没有被检测到。我也试着用postcss-nesting替换它，结果也一样。

注意：我还尝试过像指南中建议的那样，将数组语法与require('tailwind/nesting')一起使用。

有趣的是，从postss.config.js中删除所有插件(或者使用无法解决的require(仍然会输出相同的错误，这意味着加载Tailwind不需要这个文件。也许我遗漏了一些东西，导致整个postss.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在其网站上提供的指南创建了一个伪postcss.config.js-对此文件进行更改不会更改实际的postpass配置。(如果有误导的话(

这是目前已知的一个问题——Adam Wathan(Tailwind创始人(和Ian Sutherland(CRA维护者(在Github上讨论了Tailwind支持PR。但似乎并没有打算很快得到解决。

如果你想使用嵌套(或任何PostCSS插件真的(是从CRA弹出使用：

npm run eject

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

PS：启用嵌套时，请注意默认配置中的postcss-preset-env。Tailwind要求您编辑配置(如果存在(。

Answer 2

我使用CRA，为了解决这个问题，我使用postinstall在npm install或yarn之后运行脚本。脚本在安装所有依赖项后更改CRA的web包配置(原因的临时解决方案(。您可以在node_modules/react-scripts/config/webpack.config.js中找到web包配置。该脚本将我的postpass包添加到实际的CRA web包配置中。

为什么？CRA不尊重您的回购中的任何邮政编码配置

还可以查看此评论，了解如何使用postinstallhttps://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=$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答案，如果您在父目录(与package.json相同(上创建一个script.js文件并将其添加到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);
});