@snowpack/plugin-sass

This plugin adds Sass 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.

Usage no npm install needed!

<script type="module">
  import snowpackPluginSass from 'https://cdn.skypack.dev/@snowpack/plugin-sass';
</script>

README

@snowpack/plugin-sass

This plugin adds Sass 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.

A Note on Sass Implementations

Sass is interesting in that multiple compilers are available: sass (written in Dart) & node-sass (written in JavaScript). Both packages run on Node.js and both are popular on npm. However, node-sass is now considered deprecated.

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

npm i @snowpack/plugin-sass

Then add the plugin to your Snowpack config:

// 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. This involves extra setup, but the result can be up to 9× faster. (default: false).
compilerOptions.* object Pass Sass options directly to the Sass compiler (see compilerOptions).

compilerOptions

These options are camelCased equivalents of the Sass CLI 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).