https://github.com/gregives/eleventy-load-sass
Convert Sass to CSS using eleventy-load
https://github.com/gregives/eleventy-load-sass
eleventy eleventy-load sass
Last synced: 4 months ago
JSON representation
Convert Sass to CSS using eleventy-load
- Host: GitHub
- URL: https://github.com/gregives/eleventy-load-sass
- Owner: gregives
- License: mit
- Created: 2020-11-06T21:40:30.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-26T09:39:17.000Z (almost 5 years ago)
- Last Synced: 2025-10-28T02:31:17.530Z (7 months ago)
- Topics: eleventy, eleventy-load, sass
- Language: JavaScript
- Homepage:
- Size: 195 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# eleventy-load-sass
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Prettier][prettier-src]][prettier-href]
Convert Sass to CSS using [eleventy-load](https://github.com/gregives/eleventy-load).
## Getting Started
Firstly, you'll need to install [eleventy-load](https://github.com/gregives/eleventy-load) (if you haven't already) and eleventy-load-sass. You'll probably want to use eleventy-load-sass in combination with [eleventy-load-html](https://github.com/gregives/eleventy-load-html), [eleventy-load-css](https://github.com/gregives/eleventy-load-css) and [eleventy-load-file](https://github.com/gregives/eleventy-load-file), so we'll install those as well.
```sh
npm install --save-dev eleventy-load eleventy-load-sass eleventy-load-html eleventy-load-css eleventy-load-file
```
Then you can set up eleventy-load-sass using a rule in your eleventy-load options.
```js
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(require("eleventy-load"), {
rules: [
{
test: /\.html$/,
loaders: [
{
loader: require("eleventy-load-html"),
},
],
},
{
test: /\.scss$/,
loaders: [
{
loader: require("eleventy-load-sass"),
},
{
loader: require("eleventy-load-css"),
},
{
loader: require("eleventy-load-file"),
options: {
name: "[hash].css",
},
},
],
},
],
});
};
```
Now that you've set up eleventy-load-sass, you can reference a Sass file from an HTML template and eleventy-load-sass will process it for you.
```html
```
## Options
| Name | Type | Default | Description |
| ------------------ | -------- | --------- | --------------------- |
| [**`sass`**](#url) | `Object` | See below | Options for Dart Sass |
### `sass`
Type: `Object`
Pass options to [Dart Sass](https://github.com/sass/dart-sass). By default, eleventy-load-sass adds two `includePaths` so that you can import Sass files from the current directory and `node_modules`.
```js
{
includePaths: [
path.resolve(this.config.inputDir, path.dirname(this.resourcePath)),
path.resolve("node_modules"),
],
}
```
[npm-version-src]: https://img.shields.io/npm/v/eleventy-load-sass/latest.svg
[npm-version-href]: https://npmjs.com/package/eleventy-load-sass
[npm-downloads-src]: https://img.shields.io/npm/dt/eleventy-load-sass.svg
[npm-downloads-href]: https://npmjs.com/package/eleventy-load-sass
[license-src]: https://img.shields.io/npm/l/eleventy-load-sass.svg
[license-href]: https://npmjs.com/package/eleventy-load-sass
[prettier-src]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg
[prettier-href]: https://github.com/prettier/prettier