Setting up SASS in an Express app⚙️
Tags: node, sass, express, webdev
Published: 2021-08-16 10:17:54

Because the `node-sass` NPM package has been deprecated and the team over at SASS has told us to use [Dart SASS](https://sass-lang.com/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!

1. Create a new directory and cd into it.
`mkdir project-dir`
`cd project-dir`

2. Then run `npm init -y` to initialize a Node.JS project and skip hitting Enter on all the options😁

3. Now we have an empty package.json that should look something like this:
    ```json
    {
      "name": "project-dir",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
    ```

4. 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.

5. In the `package.json` file, edit the `main` value to be `src/index.js` instead of just `index.js` and add three scripts:
    ```json
    "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.](https://srinivasankk.com/npm-scripts-with-and-operators/)

6. 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:
   
    ```javascript
    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
    ```

7. 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.
    ```

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

    ```scss
    $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.
    ```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">
    
      <link rel="stylesheet" href="/assets/styles/main.css">
      
      <title>Document</title>
    </head>
    <body>
      <h1>Color red</h1>
    </body>
    </html>
    ```

    Now you should be good to go. Open up a browser and navigate to `localhost:9090`. Now you should see a red h1 that says "Color red"!


**Please feel free to leave a comment below if you have any questions or suggestions!**