1

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.

deathangel908
  • 8,601
  • 8
  • 47
  • 81

0 Answers0