metalsmith-scss v1.0.0

metalsmith-scss

A metalsmith plugin for compiling SCSS code in HTML markup and SCSS source files.

This plugin compiles all SCSS code in HTML files and SCSS source files. In HTML files, the tag <style type="text/scss"> will be compiled from SCSS to CSS, and SCSS source files (by default with the extension .scss) will be compiled to CSS.

Installation

npm install metalsmith-scss

Usage

To use this plugin, simply add it to the existing plugins in your Metalsmith source file or include it in the Metalsmith JSON file:

JavaScript

const Metalsmith = require('metalsmith');
const scss = require('metalsmith-scss');

Metalsmith(__dirname)
  .use(scss())
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "plugins": {
    "metalsmith-scss": {}
  }
}

Options

You can pass options to metalsmith-scss with the Javascript API or CLI. The options are:

• htmlPattern: optional. Only HTML files that match this pattern will be processed. Accepts a string or an array of strings. The default is **/*.html.
• scssPattern: optional. Only SCSS source files that match this pattern will be processed. Accepts a string or an array of strings. The default is **/*.scss.
• compilerOptions: optional. Options used by the SASS compiler to compile SCSS to CSS. Accepts an object. The default is {}.

htmlPattern

Only HTML files that match this pattern will have SCSS compiled. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const scss = require('metalsmith-scss');

Metalsmith(__dirname)
  .use(scss({
    htmlPattern: 'blog/**/*.html',
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-scss": {
      "htmlPattern": "blog/**/*.html"
    }
  }
}

Would only process HTML files within the ./src/blog folder, because the pattern is relative to your source folder. See multimatch for further details.

scssPattern

Only SCSS files that match this pattern will be compiled. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const scss = require('metalsmith-scss');

Metalsmith(__dirname)
  .use(scss({
    scssPattern: 'blog/**/*.scss',
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-scss": {
      "scssPattern": "blog/**/*.scss"
    }
  }
}

Would only process SCSS files within the ./src/blog folder, because the pattern is relative to your source folder. See multimatch for further details.

compilerOptions

Options that can be used to modify the SCSS compilation process. So this Metalsmith JavaScript configuration or metalsmith.json:

JavaScript

const Metalsmith = require('metalsmith');
const scss = require('metalsmith-scss');

Metalsmith(__dirname)
  .use(compilerOptions({
    compilerOptions: {},
  }))
  .build((err, files) => {
    if (err) { throw err; }
  });

JSON

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-scss": {
      "compilerOptions": {}
    }
  }
}

Would modify how the SASS compiler compiles the SCSS to CSS.

License

AGPLv3