Svelte 3: пустой файл CSS после сборки customComponent

У меня странное поведение в процессе стройной сборки. У меня customComponent в Svelte.

<script lang="typescript" src="./Map.ts">

</script>

<style lang="scss" src="./Map.scss">

</style>

<svelte:options tag="dbconnect-web-map" />
<template src="./Map.html" />

В Map.scss есть только одно правило, которое нужно проверить, для которого нужно установить желтый фон.

body {
  background: yellow;
}

Вот мой rollup.config.js для сборки компонента с npm run build

...
import autoPreprocess from 'svelte-preprocess';

const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'src/main-map.js',
  output: {
    format: 'iife',
    file: 'public/build/dbconnect-web-map.js',
  },
  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
      emitCss: true,
      css: (css) => {
        css.write('public/build/dbconnect-web-map.css');
      },
      customElement: true,
      preprocess: autoPreprocess({
        /* options */
      }),
    }),
...

Файл CSS dbconnect-web-map.css создается в public/build/dbconnect-web-map.css, но содержимое файла пусто. Только совет к css.map файлу там.

/*# sourceMappingURL=dbconnect-web-map.css.map */

Думаю, файл dbconnect-web-map.css.map выглядит нормально, но не уверен.

{
  "version": 3,
  "file": "dbconnect-web-map.css",
  "sources": [],
  "sourcesContent": [],
  "names": [],
  "mappings": ""
}

Понятия не имею, почему не включено одно правило CSS с body. Было бы очень хорошо, когда мне кто-нибудь может помочь. Кстати, я использую node v12.18.0 и npm v.6.14.4. Я не знаю, является ли это проблемой, но я хочу разместить это здесь, чтобы проверить это на вашей стороне.


svelte svelte-3 svelte-component
person juniordev4life    schedule 10.06.2020    source источник
comment
Вам нужно: emitCss: true,   -  person voscausa    schedule 11.06.2020

Ответы (1)


arrow_upward
0
arrow_downward

Проверьте список особых различий / ограничений для настраиваемых элементов в конце соответствующего раздела документации.

Я думаю, что для вас наиболее актуальным является следующий:

Вместо того, чтобы извлекаться как отдельный файл .css, стили встраиваются в компонент в виде строки JavaScript.

Это тоже, наверное, интересно:

Стили инкапсулированы, а не ограничены только областью видимости. Это означает, что любые некомпонентные стили (например, которые могут быть в файле global.css) не будут применяться к настраиваемому элементу, включая стили с модификатором: global (...)

Настраиваемые элементы не нуждаются в области видимости CSS, потому что они отображаются в теневой модели DOM, где их CSS инкапсулирован де-факто.

Кроме того, теневой DOM не поддерживает наличие таблиц стилей надежным кроссбраузерным способом. Отсюда первое ограничение, которое я процитировал.

Мое личное впечатление из моего опыта работы с пользовательскими элементами Svelte заключается в том, что существует даже больше различий в поведении с их стандартными аналогами, чем указано в документации. Я бы по возможности избегал их использования. Может быть, вам стоит еще раз проверить, зачем они вам нужны и действительно ли они нужны, прежде чем тратить слишком много времени на то, чтобы заставить их работать. Только мои 2 цента ...

person rixo    schedule 10.06.2020
comment
Приятно услышать. Вы можете принять ответ, если он решил вашу проблему? Добро пожаловать на ТАК, кстати! - person rixo; 11.06.2020