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
watch
script to take care of thegulp
while developing the app.Rename your
start
script withdev
(or something else that makes sense to you, if you already have adev
script set).Finally, add a new
start
so 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)