Laravel Mix -嵌套的顺风CSS不编译

Question

我一直在使用Laravel Mix嵌套的Tailwindcss一段时间没有问题。现在我有了一个新的Laravel 9构建，当我尝试编译时，我得到了这个错误:

ERROR in ./resources/css/app.pcss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./resources/css/app.pcss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot set properties of undefined (setting 'parent')
at AtRule.removeChild (/Users/ed/Sites/supernifty/node_modules/postcss/lib/container.js:219:38)
at Rule.remove (/Users/ed/Sites/supernifty/node_modules/postcss/lib/node.js:78:19)
at processApply (/Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:427:31)
at /Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:16:9
at /Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/processTailwindFeatures.js:47:50
at plugins (/Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/index.js:33:58)
at LazyResult.runOnRoot (/Users/ed/Sites/supernifty/node_modules/postcss/lib/lazy-result.js:339:16)
at LazyResult.runAsync (/Users/ed/Sites/supernifty/node_modules/postcss/lib/lazy-result.js:393:26)
at async Object.loader (/Users/ed/Sites/supernifty/node_modules/postcss-loader/dist/index.js:97:14)
Child mini-css-extract-plugin /Users/ed/Sites/supernifty/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!/Users/ed/Sites/supernifty/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!/Users/ed/Sites/supernifty/resources/css/app.pcss compiled with 1 error
ERROR in ./resources/css/app.pcss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot set properties of undefined (setting 'parent')
at AtRule.removeChild (/Users/ed/Sites/supernifty/node_modules/postcss/lib/container.js:219:38)
at Rule.remove (/Users/ed/Sites/supernifty/node_modules/postcss/lib/node.js:78:19)
at processApply (/Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:427:31)
at /Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:16:9
at /Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/processTailwindFeatures.js:47:50
at plugins (/Users/ed/Sites/supernifty/node_modules/tailwindcss/lib/index.js:33:58)
at LazyResult.runOnRoot (/Users/ed/Sites/supernifty/node_modules/postcss/lib/lazy-result.js:339:16)
at LazyResult.runAsync (/Users/ed/Sites/supernifty/node_modules/postcss/lib/lazy-result.js:393:26)
at async Object.loader (/Users/ed/Sites/supernifty/node_modules/postcss-loader/dist/index.js:97:14)
at processResult (/Users/ed/Sites/supernifty/node_modules/webpack/lib/NormalModule.js:758:19)
at /Users/ed/Sites/supernifty/node_modules/webpack/lib/NormalModule.js:860:5
at /Users/ed/Sites/supernifty/node_modules/loader-runner/lib/LoaderRunner.js:400:11
at /Users/ed/Sites/supernifty/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at context.callback (/Users/ed/Sites/supernifty/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/Users/ed/Sites/supernifty/node_modules/postcss-loader/dist/index.js:142:7)
webpack compiled with 2 errors

webpack.config.js:

mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.pcss', 'public/css',
[
require('postcss-import'),
require('tailwindcss/nesting'), <-- compiles with config warning if removed
require('tailwindcss'),
require('autoprefixer'),
])
.favicon()
.alias({
'@': 'resources/js',
});

if (mix.inProduction()) {
mix.version();
}

任何提示我可能做错了什么，我将不胜感激。

Answer 1

我有同样的问题，幸运的是，当我包装我的CSS从我的自定义CSS内根据层指令修复它。删除@layer指令将再次引起问题。看到https://tailwindcss.com/docs/adding-custom-styles using-css-and-layer

/* custom-components.css */
@layer components {
/* custom css */
}

我也确保正确导入源和自定义css，因为我使用postcss-import。看到https://tailwindcss.com/docs/using-with-preprocessors build-time-imports

@import "tailwindcss/base";
@import "./custom-base.css";
@import "./custom-components.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./custom-utilities.css";

另外我的postcss配置供参考。

module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: { config: "./tailwindcss-config.js" },
autoprefixer: {},
"postcss-preset-env": {
features: { "nesting-rules": false },
},
},
};