我使用的是nextjs和tailwindcss，我面临着在nextjs应用程序中添加postcss嵌套的困难。
以下是相同的配置：
next.config.js
const withPlugins = require("next-compose-plugins");
module.exports = withPlugins([], {});postcss.config.js
module.exports = {
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer",
"tailwindcss/nesting",
"postcss-nested",
],
};tailwind.config.js
module.exports = {
purge: {
enabled: true,
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/components/**/*.{js,ts,jsx,tsx}",
],
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
};在我的自定义css文件中，我尝试使用它
.toolbar_navigation_items {
li {
@apply text-3xl;
}
}那么我得到的错误
"(2:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin *before* Tailwind in your configuration.注意：我还尝试将postcss.config.js更改为
module.exports = {
plugins: [
require('postcss-import'),
require('tailwindcss/nesting'),
require('tailwindcss'),
require('autoprefixer'),
]
}就像文件里提到的那样但是上面说
A PostCSS Plugin was passed as a function using require(), but it must be provided as a string.
3条答案
按热度按时间5t7ly7z51#
引用：
https://nextjs.org/docs/messages/install-sharp
dauxcl2d2#
我也有同样的问题
1.安装postcss嵌套：
npm install -D postcss-nestinghttps://tailwindcss.com/docs/using-with-preprocessors#nesting
uqzxnwby3#
出现相同错误。使用时：
得到这个链接：https://nextjs.org/docs/messages/postcss-shape
它展示了如何编写新的配置文件（删除了封装字符串的
require('package')函数）。这为我修复了嵌套配置问题。