1

在 Next.js 中配置react-flexbox-grid和 sass 时。面对这个挑战。

使用 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
);

flexboxgrid尝试在上面的 sass 配置中包含和排除，但仍然没有运气。

经过长时间的研究，我能够通过覆盖来解决问题localIdentName:[local]，以便它匹配客户端和服务器渲染。不幸的是，如果我使用：localIdentName: '[local]__[name]__[hash:base64:5]'，它会失败，因为客户端正在使用：localIdentName:[local]。那么，我们可以如何以及在哪里覆盖 like clientIdentName？我们需要玩什么.babelrc吗？

4

0 回答 0