-1

I am working with Reactjs and using Nextjs, I want to include/add CSS to my project, My CSS files exist in styles folder, To include this I created the file _document.js and used the 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>
    )
  }
}
cloned
  • 6,346
  • 4
  • 26
  • 38
  • Does this answer your question? [Best way to include CSS? Why use @import?](https://stackoverflow.com/questions/10036977/best-way-to-include-css-why-use-import) – Cyrus Raoufi Aug 25 '22 at 06:39
  • Global CSS should be imported in `_app`. See https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet and [Next.js Global CSS cannot be imported from files other than your Custom ](https://stackoverflow.com/questions/60941853/next-js-global-css-cannot-be-imported-from-files-other-than-your-custom-app). – juliomalves Aug 27 '22 at 23:56

1 Answers1

1

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>
    )
  }
}
Stratis Dermanoutsos
  • 647
  • 1
  • 8
  • 20