Question

我网站上的CSS在第一次构建时就中断了，但是当我在代码上按Command + s时，它会自动得到纠正。 Hotreload在这里发挥了魔力。

在开发环境中，可以通过进行更改和命令+并再次撤消它们和命令+来暂时解决此问题。这将触发hotreload，并最终重新捆绑所有资产（包括CSS），并在站点上正确加载CSS。

但是在演出或制作中，我们通过以下方式制作程序： NODE_ENV=production IS_BUILDING_NEXTJS=1 next build src 所以不能在那儿入侵。

我曾尝试从webpackConfig中删除所有别名，但这没有用。

下面是我的next.config.js

const withCSS = require("@zeit/next-css");
module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  },
  // NextJS builds to `/src/.next` by default. Change that to `/build/app`
  distDir: "../build/app",
  webpack: (webpackConfig) => {
    webpackConfig.module.rules.push({
      test: /\.(gql|graphql)$/,
      loader: "graphql-tag/loader",
      exclude: ["/node_modules/", "/.next/"],
      enforce: "pre"
    });
    webpackConfig.resolve.alias.handlebars = 'handlebars/dist/handlebars.min.js';
    webpackConfig.module.rules.push({
      test: /\.mjs$/,
      type: "javascript/auto"
    });
    webpackConfig.resolve.alias["styled-components"] = "styled-components/dist/styled-components.browser.esm.js";
    return webpackConfig;
  }
});

期望css应该在每个环境的第一次加载时都正确加载。

当前，在开发中，它正在hotreload上正确加载。 Hotreload在暂存/生产上感觉不正确。

Answer 1

以下修复程序起作用，这将消除重新渲染问题和CSS错误地应用于组件的问题。从material-ui CSS not working on SSR issue

获得了参考

我们需要将dangerouslyUseGlobalCSS设置为true

generateClassName: createGenerateClassName({ dangerouslyUseGlobalCSS: true })

转到createPageContext()文件中的函数src/getPageContext.js

CSS在首次加载时中断，在热重新加载时得到纠正

1 个答案: