snowpack-sass-compiler
v1.0.6
Published
This plugin adds [Sass](https://sass-lang.com/) support
Downloads
8
Maintainers
Readme
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 supportsourceMap
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