Integrate SASS into the build and consume a UI toolkit

In the previous two Electron.js blogs building an Electron app from scratch and creating a web app with React, we have created a very basic website that does not look impressive. In the last two blogs, we have created a basic website but what about UI widgets and design? 

                                                 Source: medium.com

In this blog, we will learn to use a set of UI widgets and layout conventions to build a full-fledged working Electron.js application. You can either use HTML5 which provides a plethora of tools, or you can try a new toolkit like Semantic UI which will significantly accelerate the design of your application and adds attractive features to it. 

Here as an example, we’ll be using Honeycomb, a Redgate’s design toolkit web implementation. It is a set of SASS files that the Honeycomb web toolkit use. SASS is similar to CSS, used for styling but with more advanced features. 

In order to pull SASS files from the repository use npm, after which we will use webpack to turn these SASS files into CSS. Electron browser can easily read these CSS files. In this Electron.js tutorial you will learn to style your application. 

Steps to integrate SASS into the build

Follow these steps to integrate SASS into the build and consuming UI toolkit. 

Step 1: Install npm module

First, we need to install various npm modules to make this whole system work. Use the following code to install npm modules. 

> npm install --save-dev sass-loader node-sass css-loader postcss-loader autoprefixer style-loader url-loader

And lastly, we need to get the actual web toolkit itself:

> npm install --save git+https://github.com/red-gate/honeycomb-web-toolkit.git

Now, here we are getting a node module from the GitHub repository.

Step 2: Configure modules in webpack

After installing the module, now we have to configure all the downloaded modules in webpack. We require one rule which enable webpack to handle .scss file. 

// [...] rules: [  {    test: /\.scss$/,    loaders: [      "style-loader",      "css-loader",      "postcss-loader",      "sass-loader"    ]  },

We just have one more piece of setting to do: inform postcss-loader to run autoprefixer as part of its build step. We create a separate postcss.config.js file alongside the webpack configuration:

module.exports = {  plugins: [    require('autoprefixer')({      browsers: ['last 2 versions', 'ie >= 8']    })  ] };

Step 3: Honeycomb sass variable for paths

One problem with the Honeycomb variables is that honeycomb.scss references these variables with paths that do not work when we try referencing the style from the outside. You can correct this by configuring webpack/sass to resolve the path. Honeycomb provides sass variables that help us to provide the correct paths as mentioned below.   

$hc-dir: '../../../node_modules/honeycomb-web-toolkit/src/'; $hc-icon-font-dir: $hc-dir + 'icons/vendor/redgate/'; $hc-navigation-images-dir: $hc-dir + 'navigation/images/'; $hc-font-dir: $hc-dir + 'type/vendor/'; $hc-checkbox-loading-icon-dir: $hc-dir + 'base/images'; $slick-loader-path: $hc-dir + 'carousel/vendor/slick/images/'; $fancyboxImagesDir: $hc-dir + 'lightbox/vendor/images/fancybox'; $hc-sharing-images-dir: $hc-dir + 'sharing/images'; @import 'node_modules/honeycomb-web-toolkit/src/honeycomb.scss';

Step 4: Wrap these styles in React components

Once you have successfully integrated style, it's time to wrap it up in React component.

const Button: React.FunctionComponent<{   onClick: () => void;   primary?: boolean; }> = props => (   <a     className={`button ${props.primary && "button--primary"}`}     href="#"     onClick={props.onClick}   >     {props.children}   </a> ); const GrayBox: React.FunctionComponent = props => (   <div className="background-color--grey--1 spaced--tight padded--tight">     {props.children}   </div> ); const Centered: React.FunctionComponent = props => (   <div     style={{ display: "flex", alignItems: "center", justifyContent: "center" }}   >     <div>{props.children}</div>   </div> );

Now, you can compose this together in UI:

const App = () => (   <Centered>     <GrayBox>       <p style={{ width: "600px" }}>         Hello, <Emphasis>world</Emphasis>       </p>       <Button primary onClick={() => alert("Ok!")}>         OK       </Button>     </GrayBox>   </Centered> );

The final result would be as shown below. It is something better than the output shown at the start. 

                                                       Source: medium.com

Use the above steps and give your Electron application some style and function.