Next.js内で sass とともにreact-flexbox-grid を構成する場合。この課題に直面しています。
latest: を使用して作成されたプロジェクトcreate-next-app
で、カスタム変更はありません.babelrc
エラー
index.js:2178 警告: プロップ
className
が一致しませんでした。サーバー: "col-xs-12 col-md-4 col-lg-2" クライアント: "col-xs-12__flexboxgrid2__AdoKE col-md-4__flexboxgrid2__3pbbS col-lg-2__flexboxgrid2__1x6vt"
Sass の設定は次のようになります。
const sassConfig = {
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: '[local]__[name]__[hash:base64:5]'
}
};
もう少し:
module.exports = withPlugins(
[[withSass, sassConfig], [withCss], [optimizedImages, optimizedImagesConfig]],
nextConfiguration
);
上記の sass 構成内に含めたり除外したりしようとしflexboxgrid
ましたが、まだ運がありません。
localIdentName:[local]
長い調査の結果、クライアントとサーバーのレンダリングの両方に一致するように、をオーバーライドすることで問題を解決できました。残念ながら、私が使用する場合: localIdentName: '[local]__[name]__[hash:base64:5]'
、クライアントが使用しているため失敗します: localIdentName:[local]
。では、どのように、どこで like をオーバーライドできますclientIdentName
か? で何かをする必要があり.babelrc
ますか?