svelte — sass / scss

Admin RollupJS, Svelte

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

svelte-preprocess

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

npm install --save-dev svelte-preprocess

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

npm install --save-dev node-sass
npm install --save-dev postcss
npm install --save-dev svelte-preprocess-sass
npm install --save-dev autoprefixer

Некоторые из них обязательны (например node-sass) и без них не будет работать svelte-preprocess. Устанавливаем по аналогии.

rollup.config.js

Теперь настраиваем.

В файле rollup.config.js

// SCSS
import sveltePreprocess from 'svelte-preprocess';
const preprocess = sveltePreprocess({
    scss: {
        // includePaths: ['scss'],

        data: `
        @import '../scss/global.scss';
        @import '../scss/buttons.scss';
        @import '../scss/page.scss';
        `,
    },

    postcss: {
        plugins: [require('autoprefixer')],
    },
});

Далее в этом же файле, там где указано CSS:

    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 обязательно в стилях указать lang=’scss’

<style lang="scss">
    @import './styles.scss';

// Или можно писать прямо тут
</style>

Для импорта глобальных стилей нужно обязательно указать global:

<style global lang="scss">
    @import "../scss/global.scss";
    @import "../scss/buttons.scss";
</style>

Дело в том, что иначе будут импортированы только те стили, которые имеются на странице.

Если вам пригодилась информация, вы можете поблагодарить автора сайта символическим пожертвованием:

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"svelte — sass / scss"