使用Webpack 5在Shadow DOM中的CSS

Question

在webpack 5中，是否有可能正确生成一个可注入shadow DOM的CSS bundle？ 如果我尝试使用新的assets加载一些CSS，URL不会被转换，但我需要它们适应生成的bundle。 例如，我有一个如下所示的CSS文件：

/* src/components/header.css */
#logo {
  background-image: url('./images/logo.png');
}

如果webpack可以对嵌入到shadow dom中的url进行url编码或替换，那将会很好。 如果我按照以下方式配置webpack：

...
module.rules: [{
  test: /\.css$/,
  oneOf: [
    {
      resourceQuery: /raw/,  // import css from 'path/to/file.css?raw'
      type: 'asset/source',
      use: [
        {loader: 'css-loader'}
      ]
    },{
      ...
    }
  ]
}]
...

加载的字符串不再是CSS，而是一些Webpack脚本。如果我在规则中删除use部分，CSS将被加载而不做更改。 是否有任何插件可以使CSS内联并将其作为字符串加载？

- TheGr8_Nik

Answer 1

是的，您需要使用Webpack的“style-loader”插件，并带有insert参数。

          {
            loader: "style-loader",
            options: {
              injectType: "lazyStyleTag",
              insert: function insertIntoTarget(element, options) {
                var parent = options.target || document.head;
                parent.appendChild(element);
              },
            },
          },

更多细节请参考this。

- husayt