Electron App
Use SCSS, Luke!

Traditionally, I’ve been a LESS supporter. The way it does mixins for example seems to me more intuitive. However, I noticed that my go-to framework (bootstrap) is now doing SASS-first and then LESS. So, one adapts… and the option in angular-cli makes things less painful. What was painful was to convert a bunch of LESS code to SCSS :/

Here are some findings relative to using SCSS in my application:

  • Webpack does it nicely via the sass-loader
  • You can use relative, absolute and ~ paths to refer to other resources. ~ does module resolution for e.g. FontAwesome.

I have the following topology:

  • src/app – contains component-specific SCSS files, as defined by angular-cli
  • src/public – contains common styles, fonts and other assets.

My resulting relevant definition in webpack is:

Here is how I use it in the configuration:

Webpack also needs loaders to be configured:

Note: This is only a fragment of my webpack.config.js file.

From this point on, we’ll need explicit webpack commands to be able to run the application properly…


A little experiment: If you find this post and ad below useful, please check the ad out :-)

3 thoughts on “Electron App
Use SCSS, Luke!

  1. hi.
    i use sass for line numbering in a contenteditable like this [https://codepen.io/elomatreb/pen/hbgxp] in a electron app.
    my problem: how to compile sass file [there is just one scss file] to a css file?
    please if possible, create a (movie or text) tutorial about use sass in electron.

    1. I think you need to add a 3rd party tool to your work flow, like webpack or grunt. Webpack has the ability to compile sass relatively easy.

Leave a Reply to laur Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top