Sass

Parcel supports Sass files using the @parcel/transformer-sass plugin. Sass is compiled natively in Rust, so the sass npm package is not needed. To use it, install the plugin into your app and add it to your .parcelrc.

yarn add @parcel/transformer-sass@next --dev

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{sass,scss}": ["@parcel/transformer-sass"]
  }
}

Compiled Sass files are also processed the same way as CSS, which means it is compiled for your browser targets, and any PostCSS plugins are also applied. CSS modules can also be used by naming your file with the .module.scss extension.

Example usage

Referencing an SCSS file in an HTML file:

<link rel="stylesheet" href="style.scss" />

Importing a Sass/SCSS file as a CSS module in JavaScript or TypeScript:

import * as classes from "./style.module.scss";

document.body.className = classes.body;

Directly compiling Sass/SCSS using the Parcel CLI:

parcel build style.scss

Configuration

Sass can be configured for @parcel/transformer-sass in your .parcelrc. The loadPaths option specifies additional directories to search when resolving @use, @forward, and @import rules, relative to your project root. See the official Sass documentation for more details.

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.{sass,scss}": [{
      "plugin": "@parcel/transformer-sass",
      "config": {
        "loadPaths": ["src/styles"]
      }
    }]
  }
}

Imports that cannot be found relative to the containing file or in loadPaths are resolved using Parcel's dependency resolution, so stylesheets can be imported from npm packages (including via the sass and style package exports conditions).