Sass Setup

Getting Sass compiling correctly is the first practical step before writing any real styles. This lesson covers installing Dart Sass with npm, compiling files from the command line, and integrating Sass into common build tools like Vite and webpack.

What Does a Sass Setup Involve?

A working Sass setup needs the Dart Sass compiler installed (via the sass npm package or a standalone binary), an entry .scss file, and a way to trigger compilation, either a one-off command, a watch process, or an integration built into your bundler.

Most modern frameworks (Vite, Astro, Next.js, Angular) detect .scss files automatically once the sass package is installed as a dependency, no extra configuration required.

npm install -D sass

This installs Dart Sass. Most bundlers then compile .scss files automatically without any additional config.

Sass CLI Commands

sass input.scss output.css
sass input.scss output.css --watch
sass input.scss output.css --style=compressed

The basic command form is sass <input> <output>.
--watch recompiles automatically whenever the source file changes.
--style=compressed minifies the output for production.
--style=expanded (the default) keeps output human-readable during development.

Sass Setup Cheatsheet

Commands and flags for a working Sass compilation pipeline.

Task	Command	Purpose
Install compiler	`npm install -D sass`	Adds Dart Sass to devDependencies
One-off compile	`sass src/main.scss dist/main.css`	Compiles a single file
Watch mode	`sass src/main.scss dist/main.css --watch`	Recompiles on every save
Compressed output	`sass ... --style=compressed`	Minifies CSS for production
Source maps	`sass ... --source-map`	Generates a `.map` file for debugging
Watch a folder	`sass src:dist --watch`	Compiles every `.scss` file in a folder
Vite	`npm install -D sass`	Vite compiles `.scss` imports automatically
webpack	`sass-loader` + `css-loader`	Chains Sass compilation into the CSS pipeline

Installing Dart Sass

The sass npm package ships the Dart Sass compiler and is the recommended installation method for nearly every project, since it works both as a CLI tool and as an import inside build tools.

npm install -D sass
npx sass --version

Running sass --version confirms the compiler installed correctly.

Compiling From the Command Line

You can compile a single file, a folder of files, and optionally watch for changes so styles rebuild automatically while you work.

sass src/styles/main.scss dist/main.css --watch --style=expanded

Setup With Vite and Webpack

Vite has built-in Sass support: once sass is installed, importing a .scss file just works with no extra configuration.

Webpack needs sass-loader in addition to the sass package, chained together with css-loader and style-loader (or MiniCssExtractPlugin for production builds).

// vite: no extra config needed once "sass" is installed
import './styles/main.scss';

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

Common Mistakes

Installing the deprecated node-sass package instead of the maintained sass (Dart Sass) package.
Forgetting --watch, then wondering why changes to .scss files don't appear.
Shipping uncompressed, unminified CSS to production instead of using --style=compressed.
Not generating source maps, making it hard to debug which SCSS line produced a given CSS rule.

Key Takeaways

Install Sass with npm install -D sass to get the actively maintained Dart Sass compiler.
The Sass CLI compiles files with sass input.scss output.css and supports a --watch flag.
Use --style=compressed for production builds and --source-map for easier debugging.
Modern bundlers like Vite detect and compile .scss files automatically once sass is installed.

Pro Tip

Add a "watch:css": "sass src/styles/main.scss dist/main.css --watch" script to your package.json so any teammate can start watching Sass files with a single npm run watch:css command.