I'm using mini-css-extract-plugin in my webpack project. The configuration is primitive:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins.push(new MiniCssExtractPlugin());
sasscPlugins = [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "sass-loader",
options: {
indentedSyntax: true,
includePaths: [path.resolve(__dirname, 'src/assets/sass')]
}
}
];
This creates main.css. And webpack injects main.css into index.html. Well in my case I wanna build index.js
and create link to css file. Here's the code of how I can insert css file.
if (SEPARATE_CSS) {
let head = document.getElementsByTagName('head')[0];
let link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = css_file as string; // how do I get this reference
link.media = 'all';
head.appendChild(link);
}
The only issue I'm experiencing is I don't know how do I get reference to css file from entry.js file. I sure can hardcode it like ./main.css
but in this case publicPath won't work and hash won't work. I know that I can pass variables to entry files with webpack.DefinePlugin
but I have no idea how do I insert css reference there.