Electron Forge with SASS

Question

I use Electron Forge for an Electron app. I also make use of React and TypeScript, and I would also like to use SASS, but my current attempts fail. Apparently SASS already works without adding any new dependency to the package.json, as electron-compile takes care of that. That's what it sais on electronforge.io under Develop.

I tried adding the style.scss as an import within the first TypeScript class app.tsx, but after adding this compiling does not work anymore:

import "./style/style.scss";

leads to:

[24717:0221/194746.779571:ERROR:CONSOLE(7830)] "Extension server error: Object not found: <top>", source: chrome-devtools://devtools/bundled/shell.js (7830)

I also tried to put a link element into the head element in the index.html, but this does not do the trick either. Compiling works, but no CSS works are done:

<link rel="stylesheet" href="style/style.scss">

also tried:

<link rel="stylesheet" type="text/css" href="style/style.scss">

and:

<link rel="stylesheet" type="text/scss" href="style/style.scss">

and:

<link rel="stylesheet" type="text/sass" href="style/style.scss">

The 'style.scss` file:

body {
    background-color: #ff0000;
    color: #0000ff;
}

But none of them work. What must I do to make use of SASS files within Electron Forge?

Tormentor

Answer 1

I've managed to get this working, little bit late but hopefully this helps someone in the future. On an example app using webpack (as I'm pretty sure this is required), Electron Forge generates some js files in the root directory for webpack config.

yarn create electron-app my-new-app --template=webpack

or

yarn create electron-app my-new-app --template=typescript,webpack

https://www.electronforge.io/templates/typescript-+-webpack-template

Following this, there's two files in the project root, webpack.rules.js and webpack.plugins.main.config.js. These need to be modified to work properly, and you need to install sass-loader as a dev dependency. node-sass was recently deprecated so sass-loader will handle that okay.

Your webpack.plugins.main.config.js file should include:

module: {
  rules: require("./webpack.rules"),
},
resolve: {
  extensions: [
    ".js",
    ".ts",
    ".jsx",
    ".tsx",
    ".css",
    ".json",
    ".scss",
    ".sass",
  ],
},

Additionally, your webpack.rules.js file should have a new rule added:

{
  test: /\.s[ac]ss$/i,
  use: [
    // Creates `style` nodes from JS strings
    "style-loader",
    // Translates CSS into CommonJS
    "css-loader",
    // Compiles Sass to CSS
    "sass-loader",
  ],
},

This is what's provided in the documentation on the page for sass-loader, properly implemented into electron forge. https://www.npmjs.com/package/sass-loader

Finally, your renderer.js (or renderer.js) should be adapted to import a scss file rather than a css file.

import './index.scss';

From there, you should be good to go!

Technic

Following this method, I get an error when I try to compile: SassError: expected "{". referring to import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";. – Foskett

I see the same behavior as @Foskett – Milicent

Answer 2

You need to compile the SASS file to generate a CSS file and then put it in the index.html Yo can use the console to try it

# Path to SASS File > OUTPUT path to CSS File
sass style/sass/style.scss style/style.css

then, import the file in the head

<link rel="stylesheet" href="style/style.css">

Tripper

Ok, this works, but it is not very pretty as I have to do this by hand every time before I yarn start the app. – Tormentor

use the flag -w sass style/sass/style.scss style/style.css -w this command makes the file constant watched – Laws

Ok, this might do as a workaround. Although it requires opening two terminals. One for npx sass --watch --no-source-map src/style/style.scss src/style/style.css and a second one for yarn start. – Tormentor

Also, with this method Electron Forge does not track either the CSS or the SCSS. Hence, when changed there is not automatic reload. – Tormentor

Electron does not current implementing SASS :/ look this – Laws

SASS works without problems in Electron when using Webpack. DevDependencies: node-sass and sass-loader. Within webpack.config.js add sass-loader as a module rule. But here I am trying to use SASS within Electron Forge where there is no access to any Webpack configuration. – Tormentor