Webpack style-loader 将 SCSS 插入到 Shadow-dom 中

Question

我正在尝试配置 webpack 将自定义 SCSS 样式插入到影子 DOM 节点中，而不是插入到文档的头部。Shadow DOM 节点的位置并不总是一致的，因此传递元素以动态插入样式的能力是关键。

该文档style-loader引用了一个可以在配置中使用的函数，insert该函数允许创建函数以指定要添加样式的位置。导入样式并使用参数调用use函数target是该示例指定要添加样式的其他元素的方式。

我遇到的问题是options插入函数中调用的第二个参数始终未定义。该element参数存在并包含正确的自定义样式标记内容，但从options未定义指定将这些样式添加到何处的对象，因此样式最终会添加到文档头，这不是所需的结果。

这是我的相关 webpack 代码：

    module: {
    rules: [
        {
            test: /\.css$/i,
            exclude: /\.lazy\.css$/i,
            use: ['style-loader', 'css-loader'],
        },
        {
            test: /\.scss$/,
            exclude: /\.lazy\.scss$/i,
            use: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
            test: /\.lazy\.scss$/i,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        injectType: 'lazyStyleTag',
                        insert: function insertIntoTarget(element, options) {
                            var parent = null;
                            if (!options) {
                                parent = document.head;
                            } else {
                                parent = options.target;
                            }
                            parent.appendChild(element);
                        },
                    },
                },
                'css-loader',
                'sass-loader',
            ],
        },
       ]
      }

这是相关的反应代码：

import React from 'react';
import ReactDOM from 'react-dom';
import styles from './styles/Component.lazy.scss';

const Component = () => {
    return (
        <div>Component in shadow DOM</div>
    );
};

if (document.querySelector('div.ComponentClass') === null) {
    const container = document.createElement('div');
    container.className = 'ComponentClass';
    document.body.appendChild(container);

    const shadow = document.querySelector('div.ComponentClass').attachShadow({ mode: 'open' });
    const target = document.querySelector('div.ComponentClass').shadowRoot;

    styles.use({ target });

    ReactDOM.render(<Component />, target);
}

我在这里做错了什么导致参数options始终未定义吗？

我还尝试了一些将不同的东西传递到styles.use函数中的变体，例如，无论什么{ options: { target: ... } }，似乎都只element传递参数

Answer 1

您是否尝试过升级您的style-loader版本？这是添加此功能的 PR： https ://github.com/webpack-contrib/style-loader/pull/535

3.0.0版本没有它。版本 3.3.1 确实支持将参数传递给use.