The error we\u2019re encountering happens because Next.js enforces rules about how global CSS is imported to prevent style conflicts and encourage modularity. Specifically, global CSS files (like .scss) can only be imported in the pages\/_app.js file. This restriction doesn’t apply to CSS Modules (e.g., .module.scss), which are scoped to individual components.<\/p>\n
To make .scss files act as global CSS and be imported in their respective places, we can use one of the following approaches:<\/p>\n
\r\n\/\/ pages\/_app.js\r\nimport '..\/styles\/global.scss'; \/\/ Example: main global file\r\nimport '..\/styles\/otherGlobal.scss';\r\n\r\nfunction MyApp({ Component, pageProps }) {\r\n return <Component {...pageProps} \/>;\r\n}\r\n\r\nexport default MyApp;<\/pre>\nIf we have multiple .scss files, combine or import them all in _app.js.<\/p>\n
2. Use CSS Modules for Component-Level Styles<\/h3>\n
We can convert our .scss files to CSS Modules by renaming them to filename.module.scss and updating the import statements in our components. This approach ensures that styles are scoped to individual components, eliminating the need for global imports:
\n1. Rename .scss files:<\/strong>
\nFrom component.scss to component.module.scss.
\nUpdate component imports:<\/p>\n\r\nimport styles from '.\/component.module.scss';\r\nconst MyComponent = () => (\r\n Hello, World!<\/div>\r\n);\r\n<\/pre>\nThis approach ensures styles are encapsulated and avoids conflicts.<\/p>\n
Recommendation<\/h2>\n
If possible, we should prefer CSS Modules<\/strong> (Option 2) as they align with Next.js best practices for modular and maintainable styling. However, if our application heavily relies on global styles, Option 1 provides a cleaner transition while still adhering to Next.js guidelines.<\/p>\n","protected":false},"excerpt":{"rendered":"The error we\u2019re encountering happens because Next.js enforces rules about how global CSS is imported to prevent style conflicts and encourage modularity. Specifically, global CSS files (like .scss) can only be imported in the pages\/_app.js file. This restriction doesn’t apply to CSS Modules (e.g., .module.scss), which are scoped to individual components. To make .scss files […]<\/p>\n","protected":false},"author":1,"featured_media":11945,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-11944","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11944"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=11944"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11944\/revisions"}],"predecessor-version":[{"id":11946,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11944\/revisions\/11946"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/11945"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=11944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=11944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=11944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}