Setting up SASS in an Express app⚙️

#node #sass #express #webdev

Because the node-sass NPM package has been deprecated and the team over at SASS has told us to use Dart SASS instead, many of the old guides have become obsolete. That's why I'm writing this guide, to teach you how to set up Dart SASS in your Express project.
For you to be able to follow this guide, I presume you have some basic knowledge about Node and NPM and that you know how Express and SASS works. Now that we have that out of the way, let's get started!

Setup a basic Express + Nodemon app.

First we will need an app to work on. If you already have one you can skip to step 4. Let's code!

Create a new directory and cd into it.
mkdir project-dir
cd project-dir
Then run npm init -y to initialize a Node.JS project and skip hitting Enter on all the options😁

Now we have an empty package.json that should look something like this:

{
  "name": "project-dir",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now run npm i express sass and npm i nodemon --save-dev or yarn add express sass and yarn add nodemon --dev if you are using yarn. Now we can setup our scripts and our Express server.
In the package.json file, edit the main value to be src/index.js instead of just index.js and add three scripts:
```
"scripts": {
    "start": "node .",
    "dev": "nodemon . & npm run scss",
    "scss": "sass --watch src/scss/main.scss public/styles/main.css"
},
```
This allows us to run our Nodemon dev server and the SASS compiler at the same time. The reason that we are using one & and not two is that two runs it sequentially, which wouldn't work as the Nodemon dev server never stops and let's the SCSS script run, that's why we need to run them in parallell with &&. Learn more here.

Now we can create our folders and files. First create a src folder and in it create a index.js file. This will be our entry point for the application. Also inside the src folder, create a scss folder and in it create a main.scss file and and also a pages folder which contains your index.html. In the root directory, create a public folder and in it create a styles folder. Now go back to the index.js file and paste this code:

const express = require('express')
const path = require('path')

const app = express()
const PORT = 9090

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

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

app.listen(PORT, () => {
  console.log(`App running on port ${PORT}`)
})

Your project structure should look something like this:

.
├── package.json
├── public
│   └── styles
└── src
    ├── index.js
    ├── pages
    │   └── index.html
    └── scss
        └── main.scss

Now everything should be set up properly. Run npm run dev and you should get something like this in the console:

> project-dir@1.0.0 dev
> nodemon . & npm run scss

[nodemon] 2.0.12
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node .`
App running on port 9090

> project-dir@1.0.0 scss
> sass --watch src/scss/main.scss public/styles/main.css

Sass is watching for changes. Press Ctrl-C to stop.

Now go into your main.scss file and write some SCSS code, for example:

$color_red: red;

h1 {
  color: $color_red;
}

Now save and you should see your clean CSS code in the main.css file in the styles folder. Now paste this code into your index.html file and resave.

<!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">

  <link rel="stylesheet" href="/assets/styles/main.css">

  <title>Document</title>
</head>
<body>
  <h1>Color red</h1>
</body>
</html>