Import CSS from "node_modules" in Webpack

Donald Taylor picture Donald Taylor · Mar 27, 2018 · Viewed 53k times · Source

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

Answer

Andy Ray picture Andy Ray · Mar 28, 2018

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?