I am in the process of improving the modularity of my front-end design by delving into webpack. This tool provides a style loader, which enables you to import a css file and inject it into the document like this:
require("style/url!file!./file.css");
// => add a <link rel="stylesheet"> to file.css to document
However, as my primary focus is on websites rather than webapps1, I find it strange to add css through javascript. I might just be traditional in my approach, so I am curious: should the loader be used for all css, or is it only intended for loading small, conditional portions of css?
If it is suitable for loading all css, are there any drawbacks to using a webpack-generated bundle.js to inject the css instead of directly linking a css file in the html? Other than the obvious issue of it not working without javascript enabled?
1: The distinction lies in the fact that my websites contain very little dynamic content, javascript plays a minor role, and I do not employ javascript routing but instead use static .html files for pages