Стили Svelte в препроцессе не включаются в сборку. css - PullRequest
Новая
       161

Стили Svelte в препроцессе не включаются в сборку. css

0 голосов
/ 26 мая 2020

заранее спасибо.

Я создаю приложение в svelte, и у меня проблема со стилями. Я предварительно обрабатываю импорт в тегах стиля с помощью файла rollup.config. js, но не с помощью svelte-preprocess, а с помощью предварительной обработки rollup-plugin-svelte. Я делаю это по примеру официальной документации. https://svelte.dev/docs#svelte_preprocess

Все работает нормально, в коде возврата sass: css .toString (); Я получаю код css из импорта, но ... результат не добавляется в мой пакет. css, он просто исчезает.

Что мне не хватает?

Мой Rolling.config. js: 

...
...
    plugins: [
        svelte({

            dev: !production,

            css: css => {
                css.write('public/build/bundle.css');

            },
            preprocess: {
                style: async ({ content, attributes, filename }) => {
                    // only process <style lang="sass">
                    if (attributes.lang !== 'sass') return;

                    const { css, stats } = await new Promise((resolve, reject) => sass.render({
                        file: filename,
                        data: content,
                        includePaths: [
                            path.dirname(filename),
                            './node_modules',
                        ],
                    }, (err, result) => {
                        if (err) reject(err);
                        else resolve(result);
                    }));
                    return {
                        code: css.toString(),                   // this works
                        dependencies: stats.includedFiles
                    };
                }
            },
        }),
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
...
...

В одном из моих файлов .svelte 

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

</style>

Все остальные стили без lang = "sass "не обрабатываются предварительно и добавляются в бандл. css файл.

Я заблокирован, мне кто-нибудь поможет?

Еще раз спасибо

1 Ответ

1 голос
/ 26 мая 2020

Добавьте emitCss: true в svelte(..), например: 

svelte({
  dev: !production,
  emitCss: true, // without this, <style> in components are not included in bundle
  css: css => {
    css.write('public/build/bundle.css')
  }
}),

Это приведет к выдаче CSS в виде «файлов» для обработки другими плагинами.

...