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

Question

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?

Afzal Hossain · Accepted Answer · 2019-01-17 04:04:34Z

74

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'

edited Jan 17, 2019 at 4:04

answered Aug 13, 2017 at 8:51

Afzal Hossain

3,3381 gold badge23 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sampson Crowley Over a year ago

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

Afzal Hossain Over a year ago

Correct! If the css loader is defined properly, it should load the css from the package without the relative path.

aweibell Over a year ago

@AfzalHossain Perhaps you should update your answer accordingly?

Sampson Crowley · Accepted Answer · 2020-12-04 20:51:43Z

52

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'

when using (s)css imports, use the tilde (~) to indicate an absolute import:

@import '~package/css/style-to-import.css'

edited Dec 4, 2020 at 20:51

answered Jun 2, 2018 at 17:20

Sampson Crowley

1,2621 gold badge11 silver badges23 bronze badges

2 Comments

kiranvj Over a year ago

Yes, mostly the css will be in <package>/dist folder

Sherif eldeeb Over a year ago

how can I load a css file using <Link> from node_modules without copying it into "public" folder

png · Accepted Answer · 2020-07-24 01:22:55Z

11

A distinction not made from the previous answers is it depends on where you're importing the CSS into; a component or into a stylesheet.

If you're importing a node_modules stylesheet into a component, you don't need a relative path like mentioned above.

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

However, if you're importing a node_modules stylesheet into a CSS/SCSS file, you need to use tilde ~.

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

answered Jul 24, 2020 at 1:22

png

1,13115 silver badges18 bronze badges

Comments

zero8 · Accepted Answer · 2019-01-28 08:55:42Z

-7

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.

answered Jan 28, 2019 at 8:55

zero8

2,0033 gold badges16 silver badges25 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related