Why can't I use CSS files in my Next JS app?

Question

I have been working on a project using Next JS for website design and want to use CSS files for component design, but why can't I import it in my component? Is it possible to only use modular CSS files in a Next JS app?

I have tried many times to import CSS files in my Next JS project without success. I have imported the global CSS file and the modular CSS file, but cannot import the CSS file.

Answer 1

If you don't want to use module, but want to use a global CSS file that affects all components and pages, then it is possible.

But if you want to use separate CSS files for each component, then modules are the solution.

Please refer to this document

Create a pages/_app.js file if you don’t have one already. Then, import the styles.css file.

import '../your_styles_file.css'
 
// 这个默认导出在新的 `pages/_app.js` 文件中是必需的。
export default function YourApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Due to the global nature of style sheets and to avoid conflicts, you can only import them in pages/_app.js. These styles in styles.css will be applied to all pages and components in the application.