svelte — sass / scss

Установка sass / scss в реактивном фреймворке svelte.

svelte-preprocess

Устанавливаем

npm install --save-dev svelte-preprocess

Также могут пригодится такие модули:

node-sass
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')],
    },
});

Далее в этом же файле, там где указано 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 — sass / scss"
Если вам нужно добавить участок кода ставьте его между тегами <code></code>