WittCode💻

Node Express and SASS/SCSS Setup

By

Connect an Express application with SASS and SCSS. Learn how to use SASS and SCSS with Node.

Table of Contents 📖

What is SASS?

SASS, or syntactically awesome style sheets, is a CSS preprocessor scripting language. SASS adds special features to CSS such as variables, nesting rules, and mixins. The goal of SASS is to make styling a webpage simpler and more efficient. SASS has two syntax options, SCSS and SASS. Therefore, SASS is a CSS precompiler and also a syntax.

What is SCSS?

SCSS, or sassy cascading style sheets, is a syntax for SASS that also adds additional functionality to CSS such as variables, nesting, and mixins. SCSS is compiled into CSS by the SASS precompiler.

SASS vs. SCSS

There are two syntaxes available for SASS: SCSS and SASS. SASS is an older syntax that uses indentation to indicate nesting and newlines to separate properties. SCSS uses brackets to indicate nesting and semicolons to separate properties. Files using SCSS have a .scss extension while files using SASS have a .sass extension. However, both of these syntaxes need the SASS precompiler to work. Both syntaxes result in the creation of CSS.

What is Express?

Express is a backend web application framework for Node designed to make building web applications easier.

Project Structure

Our project will consist of a top level folder called express-and-sass.

mkdir express-and-sass
cd express-and-sass

Initializing our Project

Lets initialize our project as an npm project by using the command "npm init -y".

npm init -y

This command will create a package.json file at the top level of our application. A package.json file contains information about our project including dependencies, npm scripts, and other information.

Installing Express

Express is simply an npm package so we can install it from the npm repository.

npm install express

Installing SASS

We can also install SASS as an npm package from the npm repository.

npm install sass

The SASS npm package provides access to the SASS executable, which will compile our SCSS/SASS files.

Creating npm Scripts to Run our Application

We need to set up some npm scripts to run our application and compile our SCSS/SASS files. An npm script is a way to bundle commands and automate tasks such as compiling SASS/SCSS, creating a custom build of a project, starting a server for development, etc. Scripts are defined under the scripts key in our package.json file.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
}

Creating an npm Script to Compile our SCSS/SASS

Remember, SCSS and SASS files are compiled into CSS files before being inserted into the DOM. We will compile our SCSS/SASS files using the following script.

"scripts": {
    "sass-watch": "sass --no-source-map --watch styles/main.scss public/css/main.css"
 }

The above command will run our SASS precompiler, telling it to watch for changes in styles/main.scss, and when it notices changes, compile the SCSS code into a file called main.css inside public/css. We also pass the option "--no-source-map" so that SASS doesn't generate any source maps. A source map links each line in the CSS output file to its corresponding SCSS source file.

Project Structure

Lets create the folders styles, public/css, and place the file main.scss inside styles.

Remember, our npm script "sass-watch" is looking for changes inside styles/main.scss and when it sees some it will compile main.scss into main.css and place it inside public/css.

Writing some SCSS

Lets declare a variable in main.scss and assign it as the color to all h1 tags.

$darkRed: rgb(139, 35, 35); 
h1 {
    color: $darkRed;
}

After saving the file, look in the terminal for the following message.

Compiled styles\main.scss to public\css\main.css.

Now, if we navigate over the public\css\main.css we should see the following.

h1 {
    color: #8b2323;
}

That's all we needed to do to get our SASS compiler up and running!

Creating an Express App

Now lets create our Express application. This application will serve the static css file main.css. To begin, lets first create an index.js file at the top level of our application and then import Express into it.

const express = require('express');

Now lets create an Express app and capture it in a variable called app.

const app = express();

Allow Express to Serve Static Files

We want Express to serve our compiled CSS files to the client. To do this, we have to register some middleware with Express.

app.use(express.static());

app.use() adds global middleware to an Express application. express.static() is a middleware that accepts a folder location to static content. Our static content is located inside our public folder. To specify this location, we will make use of the global node module path.

const path = require('path');

We can then use the method path.join() and the variable __dirname to specify the location of our public folder.

app.use(express.static(path.join(__dirname, 'public')));

__dirname gives the current directory location and path.join() appends the two paths provided to it.

Creating a Static HTML File

Lets create a HTML file called index.html that will link our compiled CSS file. Place the following in public/html/index.html.

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="css/main.css">
 </head>
 <body>
 
     <h1>Connected to Compiled CSS File!</h1>
     
 </body>
 </html>

Notice how we omit the public directory from the path to our main.css file. This is because we registered public as the root for our static files middleware.

Creating an Express Route to Send Files

We will serve our index.html file from a HTTP GET request to the root of our application.

app.get('/', (req, res) => {
     
});

To serve a file to the user with Express we use the method sendFile() and pass it the path to the file.

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public/html/index.html'));
});

Binding our Express Application to a Port

Lets now bind our Express application to a port.

app.listen(1234);

A port is a virtual entity within an operating system that helps computers sort network traffic.

Installing nodemon

We will be using nodemon to run our Express application. nodemon is a CLI tool that watches the file system for changes and restarts the application when it notices changes. We will install it as a development dependency with --save-dev.

npm install nodemon --save-dev

Creating an npm Script for Express

Lets create a npm script called "nodemon-watch" that runs our Express application and also restarts the server whenever a file is changed.

"nodemon-watch": "nodemon index.js -e *"

If we run "npm run nodemon-watch" our index.js file will be ran. Also, -e makes it so any changes to our project's files will restart our server.

Installing npm-run-all

We now have two npm scripts: one to run our Express application and one to compile our SCSS files. However, we want a way to run both of these scripts at once. In other words, whenever a change is made to a SCSS file we want SASS to compile it to CSS and we then want our nodemon server to restart. We can do this with the npm package "npm-run-all".

npm install npm-run-all --save-dev

What is npm-run-all?

The npm package npm-run-all is a CLI tool that allows us to run multiple npm-scripts sequentially or in parallel. We tag on "--save-dev" to the install because we need this package for development but not for production.

Creating an npm-run-all Script

Lets create a npm script to run both our SASS and nodemon scripts.

"dev": "npm-run-all --parallel sass-watch nodemon-watch"

This above command will run our sass-watch and nodemon-watch commands in parallel. Now, whenever we change an SCSS file our sass-watch script will compile it to CSS and then our nodemon-watch script will restart our server with the new CSS file.

Running our Application

Lets ensure everything is working properly by running our "dev" npm script and visiting localhost:1234.

npm run dev

Now lets change the h1 tag color in our main.scss file to green, save it, and then refresh the browser.

$darkRed: green;
h1 {
    color: $darkRed;
}

Checking our console shows how our SCSS files are being compiled and our server is being restarted.

Summary

But there we have it! Express is a very powerful backend framework and SASS makes styling a webpage much simpler. As such, combining the two is a great idea! If this article was helpful, please consider donating at the top of the web page, sharing this article, and subscribing to my YouTube channel WittCode!