Electron+React项目中子窗口如何继承style-loader加载的主窗口样式？

问题根源 #

通过window.open创建的Electron子窗口是独立的BrowserWindow实例，其渲染进程和主窗口完全隔离，主窗口中style-loader注入的样式仅存在于主窗口的document中，无法直接作用于子窗口的DOM节点。Electron本身没有直接配置项让子窗口继承主窗口样式表，但可以通过以下方式实现类似效果：

方法一：让子窗口复用主窗口的构建入口（推荐） #

修改Electron主进程的窗口配置，让子窗口加载和主窗口相同的HTML文件，这样style-loader会自动将样式注入到子窗口的document中，无需额外处理。

修改main.ts中的setWindowOpenHandler配置：

mainWindow.webContents.setWindowOpenHandler((args) => {
    return {
        action: "allow",
        overrideBrowserWindowOptions: {
            frame: true,
            parent: mainWindow,
            minWidth: 400,
            minHeight: 400,
            webPreferences: {
                // 加载主窗口的HTML文件，路径根据项目实际结构调整
                url: mainWindow.webContents.getURL()
            }
        } as BrowserWindowConstructorOptions
    }
});

之后你的Portal代码可以正常将组件挂载到子窗口的DOM中，样式会自动生效。

方法二：主窗口自动同步样式到子窗口 #

在渲染进程的Portal创建逻辑中，将主窗口所有由style-loader生成的<style>标签复制到子窗口的document中，实现样式共享。

修改Portal创建代码：

const $div = document.createElement("div");
const wnd = window.open("", type, title);

// 复制主窗口的样式标签到子窗口
document.querySelectorAll('style').forEach(styleEl => {
    const newStyle = document.createElement('style');
    newStyle.textContent = styleEl.textContent;
    wnd.document.head.appendChild(newStyle);
});

wnd.document.body.appendChild($div);

return createPortal(children, $div);

这种方式无需修改Electron主进程配置，完全在React层面处理，符合style-loader的使用逻辑。

方法三：Webpack打包独立CSS文件（适配需手动引入的场景） #

如果项目可以接受将样式打包为独立文件，使用mini-css-extract-plugin替换style-loader，将SCSS编译为单独的CSS文件，之后通过Electron预加载脚本自动为子窗口引入该文件。

1. 修改Webpack配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    // ...其他配置
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [new MiniCssExtractPlugin({ filename: 'styles.css' })]
};

2. 在Electron预加载脚本中添加样式引入逻辑：

// preload.js
window.addEventListener('DOMContentLoaded', () => {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = './styles.css'; // 路径根据打包后的文件位置调整
    document.head.appendChild(link);
});

3. 在main.ts的窗口配置中指定预加载脚本：

overrideBrowserWindowOptions: {
    // ...其他配置
    webPreferences: {
        preload: path.join(__dirname, 'preload.js')
    }
}

内容的提问来源于stack exchange，提问作者Kaisa Azaria