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

I was following along the installation process listed on the marketplace for Next.js blog demo
and on “Run your project locally” I received this error

ready - started server on, url: http://localhost:3000
info  - Loaded env from C:\folder\.env
info  - Using webpack 5. Reason: Enabled by default
(node:14496) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)
error - ./styles/index.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:
Location: pages\_app.js

I was able to resolve it for me by doing what is stated in the Tailwind guide:

// pages/_app.js
- import '../styles/globals.css'
+ import 'tailwindcss/tailwind.css'

I did not do any changes whatsoever other than what is listed in the guide, that’s why I thought of sharing this. Thanks

hello @yuri.vaskovski I cannot replicate your issue. But if you want you can open a PR on the Github project and we can carry on there?

Thank you very much!

Hi @mat_jack1

Thanks for getting back and sorry for not opening a PR. I needed to go back to the _app file today again, and decided to see what’s gonna happen if I change the import back to the original line and it works just fine.

I have no idea what might have caused the issue in the first place, and now it’s working fine after I created a bunch of pages and components.

I guess I’m writing this to let you know that you can probably close this topic.

Thank you

EDIT: Actually what has changed is I removed my Windows and installed Ubuntu, and since the error was happening at “run your project locally” I guess it had something to do with my own setup. Sorry for wasting the time. Thanks again

1 Like