Installing Sass — CLI, npm, and Build Tools

In this tutorial, you will learn about Installing Sass. We cover key concepts, practical examples, and best practices to help you master this topic.

Install Sass using npm, the standalone Dart Sass CLI, or integrate it into build tools like Vite and Webpack for automatic compilation from SCSS to CSS.

What You'll Learn

You will learn how to install Sass globally or per-project, use the CLI to compile SCSS files, watch for changes automatically, and integrate with build tools.

Why It Matters

Correct installation ensures your Sass compiles properly. DodaTech uses npm-installed Dart Sass with Vite for all its projects.

Real-World Use

Doda Browser uses Sass compiled via Vite's built-in Sass support. SCSS files in the src directory compile to CSS output on every file change during development.

flowchart LR
    A[What Is Sass] --> B[Installation]
    B --> C[npm Global]
    B --> D[npm Local]
    B --> E[CLI Usage]
    B --> F[Build Tools]
    style B fill:#c69,stroke:#c69,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

Method 1: npm Global Install

npm install -g sass
sass --version

Expected output: The Sass compiler version (e.g., 1.77.0) displayed in the terminal.

Now compile a file:

sass input.scss output.css

Expected output: A compiled output.css file is created from the SCSS source.

Method 2: npm Local Install (Per Project)

npm init -y
npm install sass --save-dev

Add to package.json scripts:

{
  "scripts": {
    "sass": "sass src/styles.scss dist/styles.css",
    "sass:watch": "sass --watch src/styles.scss dist/styles.css"
  }
}

Now compile:

npm run sass

Expected output: The script runs Sass and generates the compiled CSS file.

CLI Options

# Watch mode — recompiles on every change
sass --watch input.scss output.css

# Watch entire directory
sass --watch src/scss:dist/css

# Compress output (minified)
sass --style=compressed input.scss output.css

# Expanded output (readable, default)
sass --style=expanded input.scss output.css

# Source maps
sass --embed-source-map input.scss output.css

# Multiple output styles
sass --style=expanded input.scss output.css --style=compressed input.min.scss output.min.css

Expected output: Different compilation outputs based on flags — watch mode runs continuously, compressed produces minified CSS.

Method 3: Vite Integration

Vite compiles Sass automatically when you import .scss files:

npm create vite@latest my-app -- --template vanilla
cd my-app
npm install sass --save-dev

Create src/styles.scss:

$primary: #7c3aed;
body {
  background: $primary;
  color: white;
}

Import in src/main.js:

import "./styles.scss";

Run:

npm run dev

Expected output: Vite serves the app with Sass compiled automatically. Changes to SCSS trigger instant browser updates via Hot Module Replacement.

Method 4: Webpack Integration

npm install sass sass-loader css-loader style-loader --save-dev

In webpack.config.js:

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

Expected output: Webpack processes SCSS imports through the loaders, converting Sass to CSS during the build Process.

Method 5: Standalone Dart Sass

Download the standalone Dart Sass binary from the official Sass website. No Node.js required.

# Linux/Mac
./sass input.scss output.css

# Windows
sass.bat input.scss output.css

Expected output: The standalone binary compiles SCSS to CSS without any dependency on Node.js.

Common Mistakes

1. Installing Old Node Sass

Node Sass (based on LibSass) is deprecated. Always install Dart Sass: npm install sass.

2. Forgetting --save-dev

Sass is a development tool. Install it with --save-dev to avoid including it in production dependencies.

3. Running Sass on Production Server

Sass should compile during build, not on the production server. Precompile CSS before deployment.

4. Mixing Sass and SCSS File Extensions

Be consistent. Use .scss for SCSS syntax and .sass for indented syntax. Mixing them in the same project causes confusion.

5. Not Using Watch Mode During Development

Running sass without --watch requires manual recompilation after every change. Always use watch during development.

Practice Questions

1. What npm command installs the Dart Sass compiler? npm install sass --save-dev installs Dart Sass locally.

2. How do you automatically recompile SCSS on file changes? Use the --watch flag: sass --watch input.scss output.css.

3. What flag produces minified CSS output? --style=compressed outputs minified CSS.

4. How do you integrate Sass with Vite? Install sass as a dev dependency; Vite automatically detects and compiles .scss imports.

5. What is the difference between Dart Sass and Node Sass? Dart Sass is the current reference implementation. Node Sass (LibSass) is deprecated and no longer recommended.

Challenge

Set up a new project with npm, install Sass, create a SCSS file with custom variables and nesting, and configure the package.json scripts for one-time build and watch mode.

FAQ

Mini Project

Set up a Vite project with Sass compilation. Create three SCSS partial files (_variables.scss, _base.scss, _components.scss) and a main.scss that imports them. Verify the compiled CSS includes all styles.

What's Next

Understand the SCSS vs Sass syntax differences. Then learn Sass Variables for storing reusable values.