从Create-React-App升级到Next.js-CSS样式表不起作用

最近，我们发现我们必须在我们的React项目中使用SSR。我检查了我所知道的每种方法，并几乎测试了我在中型站点和其他站点上发现的所有方法。经过大量的工作，我决定我们必须迁移到Next JS。

虽然所有内容的迁移过程都很好，但适用于样式表。

在旧版应用中，我们使用webpack将样式与项目捆绑在一起，一切都很好。

这是webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const port = process.env.PORT || 3000;
const extractSCSS = new ExtractTextPlugin('./[name].css');

// const UglifyJS = require('uglifyjs-webpack-plugin');
module.exports = {

  mode: 'development',
  output: {
    filename: 'bundle.[hash].js',
    publicPath: '/'
  },
  devtool: 'source-map',
  module: {
    rules: [

      // First Rule

      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],

      },

      // Second Rule

      {
        test: /\.scss$/,
        use: ['css-hot-loader'].concat(extractSCSS.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader?sourceMap',
              options: { alias: { '../img': '../public/img' }, sourceMap: true }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        }))
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },

        {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [

    new HtmlWebpackPlugin({
      template: 'public/index.html',
      favicon: 'public/favicon.ico'

    }),


    extractSCSS,

  ],
  devServer: {
    host: 'localhost',
    port: port,
    historyApiFallback: true,
    open: true
  }
};

在迁移应用程序之后，我的next.config.js如下所示：

// next.config.js
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')

module.exports = withCSS( withSass(
  {
    webpack(config, options) {
      config.module.rules.push({
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000
          }
        }
      },
      )

      return config
    },

  }
))

问题在于，所有内容均可正确呈现，但其中没有样式表，并且不包含任何样式。有谁可以帮助我解决这个问题？