Create-React-App: What's the best way to include CSS from node_module directory
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'
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'
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'