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?

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'
                you should definitely not be using relative paths to anything in the node_modules folder. node_modules css in create-react-app can be imported the same way as any js package in the node modules folder
                    – Sampson Crowley
                Jul 23 '18 at 18:42
                Correct! If the css loader is defined properly, it should load the css from the package without the relative path.
                    – Afzal Hossain
                Jul 24 '18 at 5:07
        
relative paths are unnecessary from node_modules and should not be the recommended way to include the css
all you have to do is leave off the preceding slash and node_modules directory same as importing a js package from node modules:
import 'package/css/style-to-import.css'
        
I found this a bug of a pain. specially my webpack.config.js is not running anymore.
specially react app is now running in src folder and the import files need to be in the public folder.
i was using materialize-social and found out the easiest way is to move node_module file folder "materialize-social" to the public directory any other way please commend it down.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
                        
Related
                            
100The create-react-app imports restriction outside of src directory
3Import css files and react components in a create-react-app application?
39Get version number from package.json in React Redux (create-react-app)
2Import module from node_modules (create-react-app)
10Reference file in public folder from CSS in create-react-app
1React compile error using “create-react-app”
3How do I get create-react-app to compile code outside /src?
1Importing CSS from node_modules into a Create React App
0deploying create-react-app to gh-pages
0Importing images from src directory versus a child of src within create-react-app
site design / logo © 2020 Stack Exchange Inc; user contributions licensed under cc by-sa 4.0
                            with attribution required.
                    rev 2020.1.10.35756