Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ls-age/svelte-preprocess-sass
Svelte preprocessor for sass
https://github.com/ls-age/svelte-preprocess-sass
Last synced: 3 months ago
JSON representation
Svelte preprocessor for sass
- Host: GitHub
- URL: https://github.com/ls-age/svelte-preprocess-sass
- Owner: ls-age
- Created: 2018-02-04T21:21:22.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-05-05T06:30:50.000Z (over 1 year ago)
- Last Synced: 2024-07-07T22:03:01.410Z (4 months ago)
- Language: JavaScript
- Size: 2.87 MB
- Stars: 92
- Watchers: 3
- Forks: 6
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-svelte - svelte-preprocess-sass - Preprocessor for sass. (Integrations / Preprocessing)
README
# svelte-preprocess-sass
[](https://circleci.com/gh/ls-age/svelte-preprocess-sass)
[](https://codecov.io/gh/ls-age/svelte-preprocess-sass)
> Svelte preprocessor for [sass](http://sass-lang.com)
## Installation
```bash
npm install --save-dev svelte-preprocess-sass sass
```
## Usage
**Using rollup-plugin-svelte**
```javascript
// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import { sass } from 'svelte-preprocess-sass';
...
export default {
...
plugins: [
...
svelte({
preprocess: {
style: sass(),
},
}),
],
};
```
Now all `` elements in your components that have a `type="text/sass"` or `lang="sass"` attribute will be preprocessed by sass.
```svelte
<style type="text/sass">
$primary: red
button
color: $primary
Click me
```
### Using SCSS
...just use `type="text/scss"` or `lang="scss"` in your components:
```svelte
$primary: red;
button {
color: $primary;
}
Click me
```
Note: Before version 1, you had to explicitly allow `scss` attributes
> From the old readme:
If you prefer the non-indented syntax you have to supply the `name` option:
```js
// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import { sass } from 'svelte-preprocess-sass';
...
export default {
...
plugins: [
...
svelte({
preprocess: {
style: sass({}, { name: 'scss' }),
},
}),
],
};
```
### Passing options to sass
The `sass` function passes the first argument to the sass compiler, e.g.:
```javascript
...
sass({
plugins: [
...
]
})
```
**Common options:**
- Allow imports from _node_modules_ via the _includePaths_ option:
```js
import { join } from 'path';
import svelte from 'rollup-plugin-svelte';
import { sass } from 'svelte-preprocess-sass';
export default {
...
plugins: [
...
svelte({
preprocess: {
style: sass({
includePaths: [
// Allow imports from 'node_modules'
join(__dirname, 'node_modules'),
]
}),
},
}),
],
};
```
For available options visit the [sass](http://sass-lang.com/documentation/) and
[dart-sass](https://github.com/sass/dart-sass#javascript-api) docs.
### Filtering styles
The `sass` function passes the second argument to [svelte-preprocess-filter](https://github.com/ls-age/svelte-preprocess-filter), e.g.:
```javascript
...
sass(
{}, // Empty sass options
{ all: true } // Preprocess all styles
)
```
### Creating component libraries
Take a look at the [LukasHechenberger/sample-svelte-scss-lib](https://github.com/LukasHechenberger/sample-svelte-scss-lib) repository for an example of how to create component libraries with extendable styles. (Discussed in [#95](https://github.com/ls-age/svelte-preprocess-sass/issues/95))