svelte – sass / scss
Installing sass / scss in the svelte reactive framework.
svelte-preprocess
Install
npm install –save-dev svelte-preprocess
Such modules may also come in handy:
node-sass
postcss
svelte-preprocess-sass
autoprefixer
Some of them are required (for example, node-sass) and without them svelte-preprocess will not work. Install by analogy.
rollup.config.js
Now customizable.
In file rollup.config.js
// SCSS
import sveltePreprocess from ‘svelte-preprocess’;
const preprocess = sveltePreprocess({
scss: {
data: `
@import ‘../scss/global.scss’;
@import ‘../scss/buttons.scss’;
@import ‘../scss/page.scss’;
`,
},
import sveltePreprocess from ‘svelte-preprocess’;
const preprocess = sveltePreprocess({
scss: {
data: `
@import ‘../scss/global.scss’;
@import ‘../scss/buttons.scss’;
@import ‘../scss/page.scss’;
`,
},
postcss: {
plugins: [[require(‘autoprefixer’)],
},
});
Further in the same file, where SCSS is indicated:
plugins: [[
svelte({
// enable run-time checks when not in production
dev: !production,
// we’ll extract any component CSS out into
// a separate file – better for performance
css: css => {
css.write(‘public / build / bundle.css’);
},
svelte({
// enable run-time checks when not in production
dev: !production,
// we’ll extract any component CSS out into
// a separate file – better for performance
css: css => {
css.write(‘public / build / bundle.css’);
},
// SCSS
preprocess,
}),
