Интегрируйте Sass-версию MaterialCSS или Bulma в Svelte

Я ищу инструкции, как интегрировать sass-версии Materializecss или Bulma в Svelte. Моя цель - иметь возможность импортировать отдельные компоненты (например, компонент кнопки или компонент карты) в отдельный тонкий компонент. Кроме того, я хотел бы воспользоваться преимуществами переменных sass, которые предлагает Bulma.

Я искал несколько руководств о том, как это сделать, но пока ничего не нашел.

Любые идеи?


svelte svelte-3 svelte-component bulma materialize
person Moshe    schedule 12.11.2019    source источник

Ответы (4)


arrow_upward
11
arrow_downward

Вам не ясно, с какой частью вы боретесь, но я расскажу вам, как я использую Bulma со Svelte (и Sapper):

Прежде всего, установите зависимость bulma dev:

npm i -D bulma

затем установите svelte-preprocess:

npm i -D svelte-preprocess

затем добавьте svelte-preprocess в конфигурацию накопительного пакета:

  transformers: {
    scss: {
      includePaths: [
        'node_modules',
        'src'
      ]
    }
  }
}

Затем убедитесь, что вы передали параметр preprocess в подключаемый модуль накопительного пакета svelte. Сделайте это как для сервера, так и для клиента, если вы используете Sapper.

svelte({
                dev,
                hydratable: true,
                emitCss: true,
                preprocess: sveltePreprocess(scssOptions)
            }),

Добавьте файл точки входа scss, который включает ваши зависимости Bulma:

// scss-entrypoint.scss
@charset 'utf-8';

@import 'node_modules/bulma/sass/utilities/_all.sass';
@import 'node_modules/bulma/sass/base/_all.sass';
@import 'node_modules/bulma/sass/grid/columns.sass';
...

Затем включите файл sass в компонент корневого уровня (App.svelte) или (_layout.svelte) в Sapper:

<svelte:head>
  <style src="path/to/your/scss-entrypoint.scss"></style>
</svelte:head>

Вот и все. Я писал об этом здесь. Посмотрите этот и следующие 5 слайдов:

https://antony.github.io/svelte-meetup-talk-oct-2019/#27

и здесь есть рабочая демонстрация:

https://github.com/antony/svelte-meetup-talk-oct-2019

person Antony Jones    schedule 14.11.2019

arrow_upward
3
arrow_downward

Мой подход немного другой. Здесь я импортирую Bulma целиком, но вы можете легко импортировать только те компоненты, которые вам действительно нужны. Затем я использую PurgeCSS для очистки неиспользуемого CSS в процессе сборки.

  1. App.svelte
        <style lang="scss" global>
        @import "bulma/bulma";
        </style>
  1. rollup.config.js
    import sveltePreprocess from 'svelte-preprocess';
    import postcss from 'rollup-plugin-postcss';
    import autoprefixer from 'autoprefixer';
    import purgecss from '@fullhuman/postcss-purgecss';

    ...

        svelte({
            preprocess: sveltePreprocess({
                sourceMap: !production,
            }),
            dev: !production,
            emitCss: true
        }),
        postcss({
            plugins: [
                purgecss({
                    content: [
                        './src/**/*.svelte',
                        './node_modules/svelte/*.js',
                    ],
                }),
                autoprefixer()
            ],
            extract: true,
            minimize: production,
            sourceMap: !production,
        }),
    ...

Есть несколько вещей, которые могут быть интересны:

  1. style - global, потому что без этого я получаю много предупреждений о неиспользуемом CSS на этапе предварительной обработки.
  2. purgecss также нужна ссылка на svelte/*.js, чтобы стили, используемые в стройной базе
  3. postcss мог быть частью sveltePreprocess, но это дало мне худшие результаты, поэтому я использую автономный postcss с минимизацией
  4. Я пробовал использовать автономный preprocess только с scss и globalStyle препроцессорами (https://github.com/sveltejs/svelte-preprocess/blob/master/docs/preprocessing.md#stand-alone-processors), но это дало мне те же результаты, что и sveltePreprocess ( время и размер файла были такими же)
person dmaixner    schedule 03.08.2020
comment
Я полагаю, что что-то изменилось в модуле purgecss или postcss, потому что я всегда получаю [object Object] не плагин PostCSS при попытке использовать ваш фрагмент. - person VirgileD; 13.02.2021

arrow_upward
1
arrow_downward

Если вы сочтете это полезным, я разработал шаблон, позволяющий использовать MaterializeCSS в Svelte. Кроме того, я также добавил SMUI (Svelte Material UI), который добавляет функции scss для работы со стилями проекта с SASS.

Svelte + MaterializedCSS + SMUI

person Rubén Terré    schedule 09.12.2020

arrow_upward
0
arrow_downward

Я сделал минимальную фиксацию поверх стандартного шаблона Svelte, который запускает Bulma в этом примере репозитория:

https://github.com/samal-rasmussen/svelte-bulma/commit/8afb28f6f157de89d6ace8310a31ab6d2b5e1776

person Sammi    schedule 06.11.2020