Problem with node modules and Global CSS - nextjs

user_16459781 0
Viewed 1576

I'm migrating a project made in create react app to nextjs and I ran into this problem

./node_modules/react-bootstrap-submenu/src/index.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules\react-bootstrap-submenu\dist\DropdownSubmenu.js

Does anybody know how to solve this?

next.js reactjs css
1 Answers

Document

Since Next.js 9.5.4, importing a CSS file from node_modules is permitted anywhere in your application.

For global stylesheets, like bootstrap or nprogress, you should import the file inside pages/_app.js. For example:

// pages/_app.js
import 'bootstrap/dist/css/bootstrap.css'

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

If this solution doesn't work for you, consider the solutions below.

  1. Copy css file to public/static.
  2. and then
// pages/_app.js
import 'public/static/bootstrap.css'
user_148358200
Related