Import CSS from "node_modules" in Webpack

Question

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
          }
        }
      ]
    })
  }

Try `@import '~react-select/dist/react-datetime.css';`, the tilde is an alias for the project's root — Andy Ray, Mar 27 '18 at 16:50
That solved the issue. Thanks! If you want to add an answer, I'll accept it... — Donald Taylor, Mar 27 '18 at 18:16
What a pleasant surprise, 2 months later! I love fake internet points — Andy Ray, Apr 16 '18 at 19:57

score 95 · Accepted Answer · edited Aug 16 '19 at 13:48

95

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 What does a `~` tilde in a CSS `url()` do?

edited Aug 16 '19 at 13:48

Joel Balmer

1,171
1
14
19

answered Mar 27 '18 at 22:45

Andy Ray

26,451
11
86
123

1

Note that it is now documented: https://webpack.js.org/loaders/css-loader/#url https://webpack.js.org/loaders/css-loader/#import "To import assets from a node_modules path (include resolve.modules) and for alias, prefix it with a ~" Also, note that it is not a core webpack feature but a feature of css-loader. – dosentmatter Aug 25 '19 at 17:08
I had to remove the .css extension for it to work for some reason – vidstige May 27 '21 at 08:48

score 2 · Answer 2 · answered Aug 16 '19 at 13:57

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.

mnishiguchi · Answer 3 · 2020-09-07T14:13:47.870

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';

Import CSS from "node_modules" in Webpack

3 Answers3

Linked