Global CSS cannot be imported from files other than your Custom <App>

[niki.brown]

Probably more of a react/next question but figured I would post here since I followed prismics tutorial.

So I made a blog following the tutorial here: Next.js and Prismic - Prismic

I'm trying to use .scss for my styles and getting the following error:

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: pages/index.js

The way this blog is structured from the tutorial there is no _app.js file. The index.js file is the top level... component (not sure what the name of this file is)?

I do not want to use css modules (we are globally using bootstrap and need to load things globally) and will need to port over the existing .scss structure that I have already established.

You can find my repo here: dd-nextjs-blog-ssr/pages at main · nikibrown/dd-nextjs-blog-ssr · GitHub

I'm new to next/react so im not quite sure how to structure things to have a _app.js file and load the global style. My google-fu is failing me right now so am quite stuck.

Thanks!

N

[alex.trost]

Hey there, Niki! Thanks for posting the link to the repo, that was really helpful and I was able to get your code running with your styles.

Your hunch is right that we are going to need to add a _app.js file. Next.js has a default App component, but we can override it by declaring our own _app.js file. We can set it up as described here.

This is where we need to move the import '../styles/blog.scss' line.

So I've created pages/_app.js and it contains this code:

import '../styles/blog.scss'

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp

If your dev server is running you'll have to restart it when you add the _app.js file.

Let me know if you have any trouble!

[niki.brown]

Hey @alex.trost Thanks. I was just about to post as I figured this out. haha. Thanks!