CODEWITHSUNDEEP
reactjstypescriptwebpackelectronwebpack-style-loader
Kaisa Azaria
Kaisa Azaria

Reputation: 11

Loading styles with style-loader into secondary windows

I have a project that uses electron and react. Styles in this project are defined in .scss files, which are then imported into react components (e.g. the main page, App.tsx, has an import 'styles/main.scss' statement).

Somewhere in the project I want to use a new window to act as a popup, and I do it like this:

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

// (...)

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

return createPortal(children, $div);

The way this new window behaves is customized in main.ts (the entry point for electron), like this:

mainWindow.webContents.setWindowOpenHandler((args) => {
    return {
        action: "allow",
        overrideBrowserWindowOptions: {
            frame: true,
            parent: mainWindow,
            minWidth: 400,
            minHeight: 400,
            // (...)
        } as BrowserWindowConstructorOptions
    }
});

As it is now, the new window won't have any styles injected to it, not even the styles imported directly by components placed in that window. I know that manually creating a <link href="style.css" /> node is an option but that defeats the purpose of using style-loader, so I'd like to know if there's something I can set up in electron so child windows keep the main window's stylesheet.

What I wrote above.

Upvotes: 1

Views: 24

Answers (0)

Related Questions