样式加载器已使用与 API 架构不匹配的选项对象进行初始化

Question

我对编程非常陌生。因此，请阅读几篇文章并尝试配置 web-pack 以实现以下目的。

我正在构建一个 preact 小部件，CSS 与父网站发生冲突。因此，我尝试创建一个 Shadow DOM，然后将 css 加载到 Shadow DOM 中，而不是添加到文档标题中。

我创建了一个 Shadow DOM，并配置了 webpack 将样式注入到 Shadow 根中，如下所示。

rules: [
        // packs SVG's discovered in url() into bundle
        { test: /\.svg/, use: 'svg-url-loader' },
        {
          test: /\.css$/i,
          use: [
            {
              loader: require.resolve('style-loader'),
              options: {
                insertInto: function () {
                  return document.getElementById('#widget-_hw').shadowRoot;
                },
              },
            },
            {
              // allows import CSS as modules
              loader: 'css-loader',
              options: {
                modules: {
                  // css class names format
                  localIdentName: '[name]-[local]-[hash:base64:5]'
                },
                sourceMap: isDevBuild
              }
            }
          ]
   

但我收到以下错误

Module build failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'insertInto'. These properties are valid:
   object { injectType?, attributes?, insert?, base?, esModule? }

Answer 1

该错误准确地告诉您出了什么问题：insertInto 不是 style-loader 上的有效选项。

insert（错误消息告诉您这是有效选项之一）可能就是您想要的。