1

我在我的 webpack 项目中使用了 mini-css-extract-plugin。配置很原始：

 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')]
        }
      }
    ];

这将创建 main.css。而 webpack 将 main.css 注入到 index.html 中。好吧，就我而言，我想构建index.js并创建指向 css 文件的链接。这是我如何插入css文件的代码。

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);
  }

我遇到的唯一问题是我不知道如何从 entry.js 文件中获取对 css 文件的引用。我当然可以像硬编码一样./main.css，但在这种情况下，publicPath 将不起作用，hash 也不起作用。我知道我可以将变量传递给入口文件，webpack.DefinePlugin但我不知道如何在那里插入 css 引用。

4

0 回答 0