Gatsby：跳过不可序列化的缓存项“mini-css-extract-plugin”

Question

我将 Tailwind v2 更新到 v3。还使用我很新的盖茨比。当顺风 v2 时我没有这两个警告。但我在 v3 中得到了这个。我在 webpack.config.js 中看到了某种解决方案，例如更新最新的自动前缀程序，但在 gatsby 中却没有。所以我不确定如何解决它。如果您能给我一些建议，我将不胜感激。谢谢。

<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'mini-css-extract-plugin /Users/node_modules/css-loader/dist/cjs.js??
ruleSet[1].rules[9].oneOf[1].use[1]!/Users//node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[2]!/Users/src/styles.css|0|
Compilation/modules|/Users/node_modules/css-loader/dist/cjs.js??
ruleSet[1].rules[9].oneOf[1].use[1]!/Users/node_modules/postcss-loader/dist/cjs.js??
ruleSet[1].rules[9].oneOf[1].use[2]!/Users/src/styles.css': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems ->
 webpack/lib/NormalModule -> Array { 1 items } ->

• 我用什么

"gatsby": "^3.13.0",
"gatsby-plugin-gatsby-cloud": "^3.2.0",
"tailwindcss": "^3.0.23"
"autoprefixer": "^10.4.4",
"postcss": "^8.4.12",

Answer 1

我遇到了同样的问题，结果发现这是因为我使用该start值来对齐弹性元素中的某些项目。

例如，以下代码引发了警告：

.column {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 20px;
}

我将justify-content值更改为flex-start，警告消失了。

.column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
}