Description
Feature Proposal
Feature Use Case
We currently have .html files which contain link tags to .css files, like so:
// View.html
<link href="../css/example.css" rel="stylesheet" type="text/css" />
// Webpack.config.js
{
test: /\.css$/i,
type: 'asset/resource'
},
// example.css
.class {
color: green
background: url("./test.png");
}
In response to events at application runtime, JavaScript code then imports these .html files as a string using the html-loader, then updates a DOM element with the associated HTML. This all works great, at runtime once the HTML is appended, the browser will request the CSS file after parsing the link tag.
The issue occurs when the example.css contains urls or import statements, it appears that the asset/resource loader won't follow these links and automatically generate files or inline data (understandable, as it's CSS specific syntax).
The css-loader already handles this, but as far as we're aware it only supports ESM output. Ideally there would be a configuration option for the css-loader to export the raw css content, while emitting files (or inlining data ) for any css url/import statements encountered.
The mini-css-extract-plugin didn't seem like a good fit, because similarly it's output wasn't the raw content.
Perhaps using the postcss-loader before it's handed over to asset/resource would work, parsing any css/import statements and emitting files accordingly, but it feels like we're reinventing the wheel as the css-loader is already doing similar work.
Is there a built-in way to do this already?
Thanks in advance.