# @jamshop/eleventy-plugin-scss

> Install:

Latest version **1.0.0** (published 2020-12-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @jamshop/eleventy-plugin-scss
pnpm add @jamshop/eleventy-plugin-scss
yarn add @jamshop/eleventy-plugin-scss
bun add @jamshop/eleventy-plugin-scss
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-12-09 |
| First published | 2020-09-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 10.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | madebymike |

## Links

- npm: https://www.npmjs.com/package/@jamshop/eleventy-plugin-scss
- npm.io page: https://npm.io/package/@jamshop/eleventy-plugin-scss

## Dependencies (6)

- [sass](https://npm.io/package/sass.md) ^1.26.10
- [postcss](https://npm.io/package/postcss.md) ^8.0.9
- [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.1
- [clean-css](https://npm.io/package/clean-css.md) ^4.2.3
- [css.escape](https://npm.io/package/css.escape.md) ^1.5.1
- [postcss-import](https://npm.io/package/postcss-import.md) ^12.0.1

## Recent versions

- 1.0.0 (latest) — 2020-12-09
- 0.0.0 — 2020-09-08

## README

# Eleventy Plugin - SCSS

Install:

```
npm install @jamshop/eleventy-plugin-scss
```

## Usage

In you main config `.eleventy.js`: 
```js
const pluginSCSS = require("@jamshop/eleventy-plugin-scss");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginSCSS, {
    entryPoints: {
      main: "src/scss/main.scss"
    }
    output: "_site/css"
  });
  // and the rest of your config
};
```

This will transpile SCSS in`src/scss/main.scss` to `_site/css/main.css`. 

Their are 2 options, `entryPoints` which is required and should contain a set of key/value pairs. The key represents the output file name (without file extensions) and the value is the path to the source file. 

The second option `output` is optional although required in most situations. This is the output directory for the compiled CSS. The generated file path will be a combination of the key and the `output` option.

The plugin will take note of any files changed and add them to the watcher. It's smart about re-building only changed files.

## Bonus

It also comes with a shortcode:

```js
const pluginSCSS = require("@jamshop/eleventy-plugin-scss");

module.exports = (eleventyConfig) => {
  eleventyConfig.addPairedShortcode("scss", pluginSCSS.scssShortcode)
  // and the rest of your config
};
```

Get your scss on in templates with a shortcode (this example uses handlebars):

```
{{#javascript}}  
  console.log("hello world!");
{{/javascript}}`
```

## Todo: 

 - Add a transform

---
_Source: https://npm.io/package/@jamshop/eleventy-plugin-scss · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._