Electron App
Use SCSS, Luke!

Posted by in Project Management, Software

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…

HTH,


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