Description
Ruby version: 2.7.4
Rails version: ~> 5.2.6
Webpacker version: 6.1.1
Desired behavior:
mini-css-extract-plugin is capable of HMR now. I'd like the ability to opt into just using it all the time, even when HMR is set in webpacker.yml. I'd like to get style-loader out of the dev pipeline so that my development and production environments more closely match, while retaining HMR. It turns out this isn't too hard!
Actual behavior:
Currently, hmr: true in webpacker.yml sets Webpack.inlining_css?, which prevents stylesheet_pack_tag form emitting <link> tags for CSS, on the assumption that style-loader is in play. I monkey patched my install with:
class Webpacker::Instance
def inlining_css?
false
end
endAnd my Webpack css loader with:
// Swap all style-loader rules for mini-css-extract-plugin, even if HMR. MCEP supports HMR now.
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
webpackConfig.module.rules.forEach((rule) => {
if ("test.css".match(rule.test) || "test.scss".match(rule.test)) {
rule.use = rule.use.map((loader) => {
if (loader === "style-loader") {
return MiniCssExtractPlugin.loader;
} else {
return loader;
}
});
}
});and it works just dandy.
The fix should be as simple as allowing the explicit disabling of inlining css (perhaps inlineCss: false in webpacker.yml), then updating the Webpack::Instance#inlining_css? method and its partner in shakapacker/package/inliningCss.js to respect the flag if it's set.