Svelte preprocessor for sass
npm install svelte-preprocess-sass
> Svelte preprocessor for sass
``bash`
npm install --save-dev svelte-preprocess-sass sass
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
`
...just use type="text/scss" or lang="scss" in your components:
`svelte
`
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' }),
},
}),
],
};
`
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 and
dart-sass docs.
The sass function passes the second argument to svelte-preprocess-filter, e.g.:
`javascript``
...
sass(
{}, // Empty sass options
{ all: true } // Preprocess all styles
)
Take a look at the LukasHechenberger/sample-svelte-scss-lib repository for an example of how to create component libraries with extendable styles. (Discussed in #95)