Hi, there! 👋
Straight to the point, we are going to see in this post how to set up a project that delivers a NodeJS app with a themed User Interface (UI) powered by SASS.
My assumptions are:
- You are minimally familiarized with NodeJS apps
- You know how to install Node packages with NPM
- And, last but not least, you have a NodeJS project already 🙃
So, let's rock ...
Once upon a time, there is an app that needs to have multiple themes so your users could choose the one that suits them the most.
Surely you can create such themes using vanilla CSS, but that would be a waste of your precious time. And, as you may know, when it comes to serve your users, time is money! 🤑
So, to improve your results and optimize your time, let's use SASS to output the multiple themed CSS files.
Installing the necessary packages
We are gonna need the following packages to make it right, so please install them all as follows:
- concurrently
- gulp
- gulp-sass
- node-sass (or sass if you wish)
$ npm install -D concurrently gulp gulp-sass node-sass
Update your package.json scripts
You probably have your package.json already set up with some useful scripts, but let's update that in order to make it easier to start everything at once.
Add a
watchscript to take care of thegulpwhile developing the app.Rename your
startscript withdev(or something else that makes sense to you, if you already have adevscript set).Finally, add a new
startso we can start everything at once
Once done, the script section of your packages.json file should looks like the following snippet:
"scripts": {
...
"start": "concurrently --kill-others --names 'GULP,NODE' -c 'blue,green' 'npm run watch' 'npm run dev'",
"watch": "gulp watch",
"dev": "node index.js",
...
}
The task manager
The next step is creating a gulpfile.js which will be responsible for transpiling our SASS files into CSS.
Touch a new gulpfile.js file and paste the following content into it:
// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('node-sass'));
gulp.task('transpile', () => {
return gulp
.src('./themes/**/*.scss', { base: process.cwd() })
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(function (file) {
return file.base;
}));
});
gulp.task('watch', () => {
gulp.watch('./**/*.scss', (done) => {
gulp.series(['transpile'])(done);
});
});
gulp.task('default', gulp.series(['transpile']));
Note that there are 2 tasks in this Gulp file:
gulp.task('transpile', ...)
Converts any .scss file that is found in ./themes, outputting a .css file in the same location.
gulp.task('watch', ...)
Keeps an eye for any SASS file in your project and, when something is changed, calls transpile again, so a new output is built.
Theming up
For the sake of this exercise, let's have 2 super simple themes: default and red.
Assuming we do have a HTML boilerplate file already (e.g index.html), let's add a default class to the <body /> and import all the themes similarly to the example below:
<html >
<head >
<!-- ... -->
<link rel="stylesheet" href="/themes/default/style.css" />
<link rel="stylesheet" href="/themes/red/style.css" />
</head>
<body class="default">
<!-- ... -->
</body>
</html>
With the HTML updated, now, let's have the themes!
Create a themes folder at the root folder of your project.
Within that, create a default and a red folder respectively. Then, last but not least, create 2 style.scss files, one for each theme folder.
You should end up with something like:
/project
--/themes
----/default
------/style.scss
----/red
------/style.scss
--/ ...
Now, that the file structure is ready, some ID needs to be given to your newly created themes. In a very simple example, let's add the following code into your SASS files:
/* ./themes/default/style.scss */
html, body {
&.default {
background-color: aqua;
}
}
and
/* ./themes/red/style.scss */
html, body {
&.red {
background-color: palevioletred;
}
}
Wrapping things up
At this point you should be ready to have your themed app up. So, from a terminal window, run your app by typing the following inside your project folder:
$ npm start
Once your app is running, in the browser DevTool, try to replace the default class from the <body /> with red.
If everything went well, you should be able to see the background color of your page changing from aqua to palevioletred.
Great job! 👏 🚀
Happy coding.
Top comments (0)