Установка sass / scss в реактивном фреймворке svelte.
svelte-preprocess
Устанавливаем
npm install --save-dev svelte-preprocess
Также могут пригодится такие модули:
node-sass
postcss
svelte-preprocess-sass
autoprefixer
postcss
svelte-preprocess-sass
autoprefixer
Некоторые из них обязательны (например node-sass) и без них не будет работать svelte-preprocess. Устанавливаем по аналогии.
rollup.config.js
Теперь настраиваем.
В файле 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';
`,
},
postcss: {
plugins: [require('autoprefixer')],
},
});
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')],
},
});
Далее в этом же файле, там где указано SCSS:
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');
},
// SCSS
preprocess,
}),
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,
}),