SASS

Compile SCSS files to CSS.

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import sass from "lume/plugins/sass.ts";

const site = lume();

site.use(sass({/* your config here */}));

export default site;

See all available options in Deno Doc.

Description

The SASS plugin loads and transforms your .scss files using the Deno SASS library.

Configuration

This plugin accepts a configuration object. The available options are:

  • extensions: Array with the extensions of the files that this plugin will load. By default it is [".scss", ".sass"].
  • sourceMap: Set true to generate the source map file.
  • format: The output format (expanded or compressed). By default it is compressed.
  • options: An object with options to configure Deno SASS.
  • includes: An array of directories to search for the @imported files. By default is it is ["_includes"].

Includes

By default, the plugin is configured to look into the _includes directory to find the imported files (you can change this behavior by editing the includes option):

/* Import the SCSS file from _includes/sass/reset.scss */
@import "sass/reset.scss";

/* The extension is optional */
@import "sass/reset";

/* Import files using a relative path */
@import "./variables.scss";

The output files have the same name as the input files, but with the .css extension. For example, the file /styles/main.scss outputs /styles/main.css. Take this into account when importing the styles in the HTML pages.