SCSS

Supported extensions: sass, scss

Requirements

SCSS compilation needs sass (JS version of dart-sass) module. This will be installed automatically the first time you run parcel. It's also possible to install it manually before running parcel.

To install it with npm:

npm install -D sass

To install it with yarn:

yarn add -D sass

It's also strongly recommended to create a .sassrc file and add node_modules as include path to avoid an issue

{
  "includePaths": ["node_modules"]
}

This file controls the sass compilation with Parcel. Another thing that can be configured is the output style of the generated CSS by specifying it like so:

{
  "includePaths": ["node_modules"],
  outputStyle: "nested",
}

Usage

To use sass you can import SCSS files from JavaScript files.

import './custom.scss'

You can also directly include the SCSS file in a HTML file.

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

Dependencies in the SCSS files can be used with the @import statements.

Notes: You can also use node-sass module for SCSS compilation. Using node-sass module will give you faster compilation. However, an issue has been reported using node-sass module with Parcel.

Help us improve the docs

If something is missing or not entirely clear, please file an issue on the website repository or edit this page.