node-sass

# file structure

// This is what we set up
src/
    scss/
        styles.scss // all your @imports
        _global.scss // global stuff in here
        _header.scss // header specific
        _main.scss // page specific
        ...etc, imported files should have `_` in front of them

// This is what we want to make
dist/
    css/
        styles.css



# src/scss/styles.scss

@import "header"; // you might need .scss after these imports 🤔
@import "main";


# dist/css/styles.css
/* All of the CSS in the src/scss/ directory compiled into one file */


# node-sass command line command
node-sass --watch --recursive src/scss/ --source-map --error-bell src/scss/styles.scss --output dist/css/styles.css
          (                        options                      ) (     input        ) (        output file        )
                        - watches our directory                     - the source          - the output file that
                        - recursive makes it watch                    file                  we'll use in our HTML
                          everything
                        - source maps for development, it
                          means you know where the CSS is 
                          coming from when developing
                        - error-bell will mean you get
                          a notificaton from your terminal
                          when things go wrong