I am currently facing an issue where my CSS imports are appearing on all pages instead of just one. I have them imported in _document.js
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html>
<Head>
<link rel="stylesheet" href="/styles/index.css" />
<link rel="stylesheet" href="index.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css" integrity="sha512-xX2rYBFJSj86W54Fyv1de80DWBq7zYLn2z0I9bIhQG+rxIF6XVJUpdGnsNHWRa6AvP89vtFupEPDP8eZAtu9qA==" crossOrigin="anonymous" referrerPolicy="no-referrer" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
My goal is to import the CSS files on a per-page basis rather than having all css files on every page. I've attempted importing the css inside each JS file, but it always tries to locate /pagehere/styles/settings.css instead of just /styles/settings.css even when using import '../styles/settings.css'. Any help would be appreciated. Thank you.