Create-React-App: What's the best way to include CSS from node_module directory

create-react-app
Sean Bannister picture Sean Bannister · Aug 13, 2017 · Viewed 20.3k times · Source

I'm trying to include some CSS in my create-react-app project. The CSS is from a 3rd party NPM package and therefore its in the node_modules directory.

I tried: import '/node_modules/packagename/css/styles.css';

But I get the error:

Module not found: You attempted to import /node_modules/packagename/css/styles.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

I would prefer to not move the CSS to src/ so it can be updated via NPM. I could symlink but as I develop on windows and deploy to linux this isn't ideal.

What's the best way from me to include the CSS?

Answer

Afzal Hossain picture Afzal Hossain · Aug 13, 2017

Find the path of the css file

example: ./node_modules/packagename/dist/css/styles.css

Import using the path related to node_modules (anything after node_modules/ )

import 'packagename/dist/css/styles.css'

Related questions

Trying to use fetch and pass in mode: no-cors

I can hit this endpoint, http://catfacts-api.appspot.com/api/facts?number=99 via Postman and it returns JSON Additionally I am using create-react-app and would like to avoid setting up any server config. In my client code I am trying …

Read More
How to fix missing dependency warning when using useEffect React Hook?

With React 16.8.6 (it was good on previous version 16.8.3), I get this error when I attempt to prevent an infinite loop on a fetch request ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it …

Read More
The create-react-app imports restriction outside of src directory

I am using create-react-app. I am trying to call an image from my public folder from a file inside my src/components. I am receiving this error message. ./src/components/website_index.js Module not found: You attempted to import ../../…

Read More