webpack - Can I use webpack imports-loader to require CSS files alongside certain JS dependencies? (or, how to implicitly load CSS)

Question

I'm trying to convert a large project using RequireJS to Webpack 4. The end goal is to be able to use both tools side by side, at least for development, with minimal changes to actual code required.

I'm running into an issue with converting shim entries in my RequireJS config file to their Webpack equivalents when CSS is involved. For example, here's what a RequireJS config entry looks like:

shim: {
  jsDependency: {
    deps: ["otherJsDependency", "css!cssDependency"]
  }
}

The Webpack recommended way to shim is by using imports-loader, so here's what I've tried there (inside module.rules array):

{
  test: /jsDependency/,
  use: ['imports-loader?otherJsDependency,cssDependency']
}

The JS seems to resolve fine. I can't get the CSS to load this way. Other CSS files that are explicitly imported alongside the dependencies themselves load fine.

I guess I can create a wrapper file that requires CSS and the original dependency explicitly side by side. It would be a bit of a pain but not too much work. We do have a lot of these entries in our RequireJS config.

However... is there really no way to shim / load CSS implicitly like this with Webpack? Is imports-loader the wrong tool for the job here? I feel like I must be missing something.

Thanks!

Answer 1

imports-loader is for JavaScript. You want to use css-loader.

Answer 2

As far as I can tell, there is no way to do this with webpack rules that exactly mimics RequireJS' behaviour of using shim for implicit import. We used it in a lot of our old code for stuff like jQuery plugins to load CSS, for example.

The simple solution was to create an intermediate file (ie: webpack_libraryName.js) that imports and returns the library you'd like to use. You can then explicitly import anything you'd like to load as a side effect when it is imported there. Mapping this new file as an alias to the old one in Webpack config means you don't need to edit any actual code and can run both builds simultaneously.