title: Upgrading From Create-React-App to Next.js - CSS stylesheets are not working
body: <p>Recently we found out that we have to use SSR for Our React Project.
  I have checked with every method that I know and almost tested all methods that I've found on medium and other sites. And after a lot of work, I decided that we have to migrate to Next JS.</p>
  
  <p>While the process of migrating everything is fine, but for the style sheets.</p>
  
  <p>In the old version of our app, we used webpack to bundle our styles with the project and everything was fine.</p>
  
  <p>This is the webpack.config.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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
    }
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>and after I migrated the app, my next.config.js looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// 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
      },
  
    }
  ))</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that everything renders correctly but there are no stylesheets in it and it doesn't contain any style. Is there anybody who could help me to solve this problem?</p>