Unable to load css file in Reactjs-CodePudding

I am working with Reactjs and using Nextjs,I want to include/add css to my project,My css files exist in "styles" folder,For include this i created file "_document.js" and use following code but css file not loading,Where i am wrong ?Here is my "_document.js" code import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <Head>
          <link
            rel="stylesheet"
            href="../styles/css/style.css"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

CodePudding user response：

You should check Next.js docs, they explained really well and with a bunch of code snippets.

https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet

CodePudding user response：

To import CSS in your React, you can use JS's import.

Add

import "../styles/css/style.css";

at the beginning of your file.

So, it will look like this:

import "../styles/css/style.css";

export default class MyDocument extends Document {
  render() {
    return (
      <html>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}