Compile Sass

Sass makes CSS more dynamic, but the compile setup can feel like a burden. You don't need a bundler for it: npm scripts and the official Sass command-line interface are enough.

npm comes with Node.js. Download the installer for your system, or use a package manager like Homebrew, Chocolatey or fnm. Spruce CSS's tooling uses the current LTS version.

Open your terminal in the project folder and create a package.json file:

npm init -y

npm install sass --save-dev
npm install sprucecss

Use Dart Sass (the sass package). LibSass and Node Sass are deprecated and don't support the module system Spruce is built on.

Add two scripts to the scripts object of your package.json:

{
  "scripts": {
    "sass:dev": "sass --watch --update --style=expanded --load-path=node_modules assets/scss:assets/css",
    "sass:prod": "sass --no-source-map --style=compressed --load-path=node_modules assets/scss:assets/css"
  }
}

• sass:dev is for development: readable output, source maps, and a watcher that recompiles on every change.
• sass:prod is for production: compressed output, no source map, runs once.
• --load-path=node_modules lets you write @use 'sprucecss/scss/spruce' without a relative path. With Sass 1.71+ you can also use --pkg-importer=node and @use 'pkg:sprucecss'.

my-project/
├── assets/
│   ├── css/
│   │   └── main.css        // compiled
│   └── scss/
│       ├── config/
│       │   └── _config.scss
│       ├── component/
│       │   └── _card.scss
│       └── main.scss       // entry point
├── node_modules/
└── package.json

Sass compiles every file that doesn't start with an underscore (_); the partials are only included through @use and @forward. The next guide, Configure Your Project, shows what goes into these files.

npm run sass:dev

npm run sass:prod

• Lint your SCSS with Stylelint and the stylelint-config-sass-guidelines preset, like Spruce does.
• Add Autoprefixer with postcss-cli if you support older browsers.
• Use npm-run-all2 to run the Sass watcher next to your dev server.
• Prefer a starter? The Spruce CSS Eleventy Starter has all of this set up.