Import CSS from "node_modules" in Webpack
WebpackWebpack Style-LoaderCss LoaderWebpack Problem Overview
Some third-party modules I'm using have their own CSS files. I'd like to include them in my app's one, single CSS file, which is processed by Webpack. How can CSS files under "node_modules" be imported into my CSS file?
For example, I'm using the third-party react-select
module, but I can't import its CSS file from node_modules
:
@import 'react-select/dist/react-datetime.css';
The relevant loader in webpack.config.js
:
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
url: false
}
}
]
})
}
Webpack Solutions
Solution 1 - Webpack
You can import files relative to your project's root (resolving node_modules/
from the root folder) by prefixing with a tilde ~
:
@import '~react-select/dist/react-datetime.css';
This is a poorly documented Webpack (a redundant phrase) convention, see https://github.com/webpack-contrib/css-loader/issues/12#issuecomment-41940311 and https://stackoverflow.com/questions/39535760/what-does-a-tilde-in-a-css-url-do
Solution 2 - Webpack
If you are using too many things from one node_modules folder you can also create an alias by passing this following option
options: {
url: false,
includePaths: [
// this one for using node_modules as a base folder
path.resolve('node_modules'),
// this one for using sass as the base folder
path.resolve('node_modules/flag-icon-css/sass')
]
}
After the configuration, you can import as you were trying in your question.
Solution 3 - Webpack
I had a similar issue today. After all, all I had to do was to configure resolve
in my webpack config file. I hope this will help somebody.
Webpack version I used:
"webpack": "^4.37.0",
In a webpack config file, the following should be configured:
module.exports = {
resolve: {
extensions: ['.json', '.js', '.jsx'],
modules: ['node_modules'],
},
or
module.exports = {
resolve: {
alias: {
'some-library': path.resolve(__dirname, './node_modules/some-library'),
}
},
In a css file, we can access a library by a relative path from node_modules
:
@import '~some-library/src/some-css-file';