Laravel 混合 - 嵌套順風 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 },
    },
  },
};