My React App works fine on my friends computer using global CSS, however, I’ve been having this issue since I opened on my VSCode.
⨯ ./styles/globals.css Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules). Read more: https://nextjs.org/docs/messages/css-global Location: pages/index.js
I’ve checked the docs, but I find the instructions a little confusing as I am new to React.
Please let me know how to fix this. Also, why would this error only happen to my computer?
Here are my components:
**Pages/App.js
**
import Document, { Html, Head, Main, NextScript } from 'next/document';
import '../styles/globals.css';
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Oleo+Script&family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
**pages/index.js
**
import React from 'react';
import "../styles/globals.css"
import UserNavbar from '../components/Navbar/Navbar'
import Header from '../components/header';
import PageFooter from '../components/Footer/Footer';
const Home = () => {
return (
<div className="mx-auto">
<UserNavbar/>
<Header/>
<PageFooter/>
</div>
);
};
export default Home;
**styles/globals.css
**
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
@apply bg-[#DEDEDE];
}
I tried this below, but it simply loads the page all messed up, with the styles that is supposed to include
Move Global CSS to _app.js: As suggested, move your global CSS imports to the _app.js file. This file is a special file in Next.js that allows you to override the default App component and is the appropriate place to import global styles.
Here’s an example of how you might structure _app.js to include global CSS:
jsx
Copy code
// pages/_app.js
import '../styles/global.css';
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
Ligia Helena is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.