snowpack-sass-compiler

Snowpack plugin to add the support for Sass. this plugin will compile all *.scss or *.sass files in your project directory to CSS..

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-sass-compiler --save-dev

Then add the plugin to your Snowpack config:

// snowpack.config.js

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

Plugin Options

Name	Type	Description
includePaths	String[]	This array of strings option provides load paths for Sass to look for imports. Earlier load paths will take precedence over later ones.same as using in compilerOptions
useAlias	Boolean	This determine whather you using path aliases or not Default:false.set it to true to be able to use aliases.
aliasPrefix	String	this will tell the plugin what prefix you use for the aliases if you have one Default:none. It's optional but for optimization purposes determine a prefix is recommended. example: alias=@style -> aliasPrefix="@"
compilerOptions	{object}	This will give you the access to all Sass compiler options.

Note: compilerOptions does not support sourceMap yet.

Alias

You can use alias path by adding your snowpack configuration file snowpack.config.js

module.exports = {
  plugins: [
  [
      'snowpack-sass-compiler',
      {
        useAlias:true,
        aliasPrefix:"@" //could work without this
        compilerOptions: { outputStyle: 'compressed',includePaths: ['node_modules/bootstrap/dist/css'] },
      },
    ],
    ...    
  ],
  alias: {
    '@myStyles': './path/to/styles',
  },
  
  };

then you can use @myStyles in your SASS/SCSS files without having to include the relative path over and over. ./my/other/style/example.scss

@import '@myStyles/some.scss'
...

Note: there is no need to use includePaths when using alias as its give more flexible paths that are easy to read and tracable