NextJs 'npm build' 和 'npm start' 搞乱了风格答案

【问题标题】：NextJs 'npm build' and 'npm start' messes up stylesNextJs 'npm build' 和 'npm start' 搞乱了风格
【发布时间】：2020-12-08 11:39:55
【问题描述】：

我正在将 NextJs 用于一个项目（不幸的是，我不允许分享屏幕截图）。当我运行'npm run dev' 进行开发时，该网站按预期工作。但是当我运行'npm run build' 和'npm start' 时，我看到重叠的组件，就好像CSS 有问题一样。可能是什么问题？提前致谢！

更新

mini-css-extract-plugin 说，我的 CSS 导入中存在顺序冲突。我认为这就是网站混乱的原因。但是还是不知道怎么解决

【问题讨论】：

1.您可能需要在您的下一个配置（Webpack 配置）中添加适当的 CSS 加载器 2. 您可能需要在您的 _app.js 中包含所有 css 引用 3. 您可能需要为您的 _document 中使用的组件使用样式与 SSR 的兼容性。 js
嗨@Prabhu，在构建过程中似乎有冲突的css排序。我认为这是真正的问题。但是不知道怎么处理
您使用的是哪个版本的 nextJS ？你还在使用一些像 MaterialUI 这样的组件库吗？
我使用的是 9.5.5。不使用 MaterialUI 之类的库

标签： css reactjs npm webpack next.js

【解决方案1】：

上周我遇到了几个 css 问题，我遇到了 mini-css-extract-plugin，并在文章中读到必须使用 css 加载程序。这是我的 next.config.js 检查这是否有帮助。如果你在这里看到我已经添加了那个 mini-css-extract-plugin 但后来我把它注释掉了。添加这些加载器：['style-loader', 'css-loader', 'less-loader'] 并在 _app.js 中包含所有 css，并在 _document.js 中包含基于 SSR 的适当 MaterialUI 样式

const withImages = require('next-images')
module.exports = withImages()
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const withSass = require("@zeit/next-sass");


module.exports = withImages({
   target: 'serverless',
   webpack: function (config, { webpack }) {
    config.module.rules.push({
        test: /\.(eot|svg|gif|md)$/,
        // use: 'raw-loader',
        // test: /\.(sass|less|css)$/,
        loaders: ['style-loader', 'css-loader', 'less-loader']
    })
    config.plugins.push(new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV),
            ENV: JSON.stringify(process.env.ENV),
        }
    }))
    return config
   },
  })

【讨论】：

最新的 NextJs 应该可以在没有 @zeith/next-css 的情况下正常工作，对吧？