title: Make webpack conditionally load additional or alternative css file
body: <p>I'm trying to implement a kind of css theming in an angular 4 project. We use webpack 3 for bundling. The product is intended to be used by several companies and has to look according to their brandbooks. So we need themes. </p>
  
  <p>We gonna have several builds, but we don't want to have several versions of code. All themes should remain in the same codebase. The differences are minimal: colors, icons, fonts — everything may be changed in css. </p>
  
  <p>I have thought of several ways to do it, the most obvious would be to implement theming via <em>:host-context</em> for components and change the class of body by changing environment variable for webpack. With such method we will heve every theme inside our bundle, which is not good. Maybe there's another way?</p>
  
  <p>I wonder if it is possible to have webpack load not the css file it is asked for. Instead it could look for another file by pattern, and if it exists, use that file instead of original one. Or load both files. </p>
  
  <p>For example, we have a <em>button.component.ts</em> which imports <em>button.component.css</em>. If we don't tell webpack to use any theme, it works as usual. But if we do, it tries to read <em>button.component.theme-name.css</em> in the same directory. If that file exists, webpack imports it instead (or altogether with) the default file. </p>
  
  <p>That's basically what I'm trying to do. I guess, the same mechanism would be useful for html templates in angular. </p>
  
  <p>Is there a plugin to do such magic? Or maybe some sophisticated loader option? If you have another way to solve my task — feel free to drop a comment!</p>