How to import an external CSS file into a JS bundle?

Question

I have this config for CSS loading:

  {
    test: /\.css$/,
    use: [
      {loader: "style-loader"},
      {
        loader: "css-loader",
        options: {
          modules: true,
          importLoaders: 1,
          sourceMap: true
        }
      }
    ]
  }

As can be seen above, it uses CSS modules. All seems to work fine.

But, besides my CSS rules I create and consume in the code, there is some external CSS that comes with a 3rd party library leafletjs .

I suppose I want to just import it somehow without restructuring it as CSS modules.

How can I do it so that to make this external stylesheet injected into my JS bundle output file?

Answer 1

npm install leafletjs and add includePath option with its path:

{
    test: /\.css$/,
    use: [
      {loader: "style-loader"},
      {
        loader: "css-loader",
        options: {
          modules: true,
          importLoaders: 1,
          sourceMap: true,
          includePath: './node_modules/path/to/your/library'
        }
      }
    ]
  }