Upgrading From Create-React-App to Next.js - CSS stylesheets are not working

问题

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.

While the process of migrating everything is fine, but for the style sheets.

In the old version of our app, we used webpack to bundle our styles with the project and everything was fine.

This is the 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
  }
};

and after I migrated the app, my next.config.js looks like this:

// 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
    },

  }
))

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?

回答1:

For just using CSS from node_modules you don't need this fancy config.

3 simple steps:

Install next-css plugin:

npm install --save @zeit/next-css

Create in your root directory next.config.js with the following content:

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

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

Now you should be able to import styleshets from node_modules like this:

import 'bootstrap-css-only/css/bootstrap.min.css';

Note: Using Next v 8+

Background: I spent a few hours trying to simply import a CSS installed as a node_module and the various solutions are mostly hacky workarounds, but as shown above, there is a simple solution. It was provided by one of the core team members: https://spectrum.chat/next-js/general/ignoring-folders-files-specifically-fonts~4f68cfd5-d576-46b8-adc8-86e9d7ea0b1f

回答2:

This is not a real answer but CSS in Next.js is just SUCKS! I find myself constantly struggle to make it work so what I decided is to follow their docs and simply use:

const App = () => {
  return (
    {style}
    <div/>
  );
}

let style = (<style jsx>
{`
.someClass {}
`}
</style> )

export default App;

This way you can have CSS as you might have in regular HTML without any external imports

source

回答3:

You don't need both withCSS & withSass plugins.

If you are using Sass the withSass plugin will compile it to CSS.

Just make sure you add the path to the CSS file in your _document.js file inside the Head component like this:

<Head>
  <link rel="stylesheet" href="/_next/static/style.css" />
</Head>

回答4:

For importing css you can use Head component of the nextJS.

import Head from 'next/head';
<Head>
    <link rel="stylesheet" href="path of the css" />
</Head>

来源：https://stackoverflow.com/questions/52688284/upgrading-from-create-react-app-to-next-js-css-stylesheets-are-not-working

标签

reactjs

create-react-app

next.js

server-side-rendering