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
4 years ago