{"id":156,"hash":"e54bc4b094892ada1bf806d71d56c88d2f40bd5e42919cd50979b88b153fe988","pattern":"Next.js Global CSS cannot be imported from files other than your Custom <App>","full_message":"My React App was working fine, using global CSS also.\n\nI ran npm i next-images, added an image, edited the next.config.js file, ran npm run dev, and now I'm getting this message:\n\nGlobal CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages/_app.js.\n\nRead more: https://err.sh/next.js/css-global\n\nI've checked the docs, but I find the instructions a little confusing as I am new to React.\n\nAlso, why would this error happen now? Do you think it has anything to do with the npm install?\n\nI've tried to remove new files I've added along with their code, but this doesn't fix the problem. I've also tried what Read More: suggests.\n\nMy highest tier component:\n\nimport Navbar from './Navbar';\nimport Head from 'next/head';\nimport '../global-styles/main.scss';\n\nconst Layout = (props) => (\n
\n \n Bitcoin Watcher\n \n \n
\n {props.children}\n
\n
\n);\n\nexport default Layout;\n\nMy next.config.js\n\n// next.config.js\n const withSass = require('@zeit/next-sass')\n module.exports = withSass({\n cssModules: true\n})\n\nMy main.scss file\n\n@import './fonts.scss';\n@import './variables.scss';\n@import './global.scss';\n\nmy global.scss\n\nbody {\n margin: 0;\n}\n:global {\n .marginsContainer {\n width: 90%;\n margin: auto;\n }\n}\n\nThe thing I find the weirdest is that this error came without changing anything to do with CSS or Layout.js, and it was previously working.\n\nI've moved my main.scss import to the pages/_app.js page, but the styles still aren't coming through. This is what the _app.js page looks like\n\nimport '../global-styles/main.scss'\n\nexport default function MyApp({ Component, props }) {\n return \n}","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"Use the built-in Next.js CSS loader (see here)\ninstead of legacy @zeit/next-sass.\n\nReplace @zeit/next-sass package with sass.\nRemove next.config.js. Or do not change CSS loading in it.\nMove the global CSS as suggested in the error message.\n\nSince Next.js 9.2 global CSS must be imported in Custom component.\n\n// pages/_app.js\n\nimport '../global-styles/main.scss'\n\nexport default function MyApp({ Component, pageProps }) {\n return \n}\n\nTo add styles only to a specific component or page you can use built-in support of CSS modules. (see here)\n\nFor example, if you have a component Button.js you can create a Sass file button.module.scss and include it in the component.","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/60941853/next-js-global-css-cannot-be-imported-from-files-other-than-your-custom-app","votes":72,"created_at":"2026-04-19T04:41:25.073856+00:00","updated_at":"2026-04-19T04:51:06.845887+00:00"}