# @snowpack/plugin-sass

> This plugin adds [Sass](https://sass-lang.com/) support to any Snowpack project. With this plugin, you can import any `*.scss` or `*.sass` Sass file from JavaScript and have it compile to CSS.

Latest version **1.4.0** (published 2021-03-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @snowpack/plugin-sass
pnpm add @snowpack/plugin-sass
yarn add @snowpack/plugin-sass
bun add @snowpack/plugin-sass
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: no vulnerabilities; popular repo.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2021-03-23 |
| First published | 2020-10-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 18.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19266 |
| Maintainers | fredkschott, drewpowers |

## Links

- npm: https://www.npmjs.com/package/@snowpack/plugin-sass
- Repository: https://github.com/snowpackjs/snowpack
- Homepage: https://github.com/snowpackjs/snowpack/tree/main/plugins/plugin-sass#readme
- Issues: https://github.com/snowpackjs/snowpack/issues
- npm.io page: https://npm.io/package/@snowpack/plugin-sass

## Dependencies (4)

- [sass](https://npm.io/package/sass.md) ^1.3.0
- [execa](https://npm.io/package/execa.md) ^5.0.0
- [find-up](https://npm.io/package/find-up.md) ^5.0.0
- [npm-run-path](https://npm.io/package/npm-run-path.md) ^4.0.1

## Recent versions

- 1.4.0 (latest) — 2021-03-23
- 1.3.1 — 2021-03-16
- 1.3.0 — 2021-01-12
- 1.2.0 — 2020-12-12
- 1.1.2 — 2020-12-03
- 1.1.1 — 2020-10-20
- 1.1.0 — 2020-10-16
- 1.0.1 — 2020-10-12
- 1.0.0 — 2020-10-10

## README

# @snowpack/plugin-sass

This plugin adds [Sass](https://sass-lang.com/) support to any Snowpack project. With this plugin, you can import any `*.scss` or `*.sass` Sass file from JavaScript and have it compile to CSS.

This plugin also adds support for `.module.scss` Sass Modules. [Learn more.](https://www.snowpack.dev/reference/supported-files)

#### A Note on Sass Implementations

Sass is interesting in that multiple compilers are available: [sass](https://www.npmjs.com/package/sass) (written in Dart) & [node-sass](https://www.npmjs.com/package/node-sass) (written in JavaScript). Both packages run on Node.js and both are popular on npm. However, [node-sass is now considered deprecated](https://github.com/sass/node-sass/issues/2952).

**This plugin was designed to work with the `sass` package.** `sass` is automatically installed with this plugin as a direct dependency, so no extra effort is required on your part.

## Usage

```bash
npm i @snowpack/plugin-sass
```

Then add the plugin to your Snowpack config:

```js
// snowpack.config.js

module.exports = {
  plugins: [
    [
      '@snowpack/plugin-sass',
      {
        /* see options below */
      },
    ],
  ],
};
```

## Plugin Options

| Name                |   Type    | Description                                                                                                                                                                                                                                                                              |
| :------------------ | :-------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `native`            | `boolean` | If `true`, the plugin will ignore the npm version of sass installed locally for the native Sass CLI [installed separately](https://sass-lang.com/install). This involves extra setup, but the result can be [up to 9× faster.](https://stackoverflow.com/a/56422541) (default: `false`). |
| `compilerOptions.*` | `object`  | Pass [Sass options][sass-options] directly to the Sass compiler (see `compilerOptions`).                                                                                                                                                                                                 |

### `compilerOptions`

These options are camelCased equivalents of the [Sass CLI Options][sass-options]. The options listed here are safe for use. The other flags not listed here may cause issues or conflicts with Snowpack and/or other plugins; use at your discretion.

| Name             |              Type              | Description                                                                                             |
| :--------------- | :----------------------------: | :------------------------------------------------------------------------------------------------------ |
| `loadPath`       |       `string, string[]`       | Add directories to Sass's load path, to support looking up and loading partials (etc.) by name.         |
| `style`          | `'expanded'` \| `'compressed'` | The output style. Specify `'compressed'` to enable Sass’ built-in minification (default: `'expanded'`). |
| `sourceMap`      |           `boolean`            | Enable / disable source maps (default: `true`).                                                         |
| `sourceMapUrls`  |  `'relative'` \| `'absolute'`  | How to link from source maps to source files (default: `'relative'`).                                   |
| `embedSources`   |           `boolean`            | Embed source file contents in source maps (default: `false`).                                           |
| `embedSourceMap` |           `boolean`            | Embed source map contents in CSS (default: `false`).                                                    |
| `charset`        |           `boolean`            | Emit a `@charset` or BOM for CSS with non-ASCII characters. (default: `true`).                          |
| `update`         |           `boolean`            | Compile only out-of-date stylesheets (default: `false`).                                                |

[sass-options]: https://sass-lang.com/documentation/cli/dart-sass#options

---
_Source: https://npm.io/package/@snowpack/plugin-sass · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._