Napping Peanut Monsters

    snowpack-sass-compiler

    1.0.6 • Public • Published

    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

    Install

    npm i snowpack-sass-compiler

    DownloadsWeekly Downloads

    53

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    8.15 kB

    Total Files

    5

    Last publish

    Collaborators

    • danzo7