Svelte 3：构建 customComponent 后为空 CSS 文件

Question

我在 svelte 构建过程中有一个奇怪的行为。我在 Svelte 中有一个 customComponent。

<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": ""
}

不知道为什么没有包含带有 body 的 CSS 规则。如果有人可以帮助我，那就太好了。顺便说一下，我使用的是 node v12.18.0 和 npm v.6.14.4。我不知道这是否是一个问题，但我想把它放在这里以供您自己测试。

Answer 1

查看 corresponding docs section.

末尾的自定义元素具体差异/限制列表

我认为与你相关的是这个：

Instead of being extracted out as a separate .css file, styles are inlined into the component as a JavaScript string

这个也可能感兴趣：

Styles are encapsulated, rather than merely scoped. This means that any non-component styles (such as you might have in a global.css file) will not apply to the custom element, including styles with the :global(...) modifier

自定义元素不需要 CSS 范围，因为它们在阴影中呈现 DOM，其中它们的 CSS 被封装 事实上.

此外，阴影 DOM 不支持以可靠的跨浏览器方式使用样式表。因此，我引用了第一个限制。

根据我对 Svelte 自定义元素的体验，我的个人印象是，与标准对应元素的行为差异甚至比文档中所述的差异还要多。我会尽可能避免使用它们。也许您应该重新检查为什么需要它们以及是否真的需要它们，然后再花太多时间使它们起作用。只是我的 2 美分...

Svelte 3：构建 customComponent 后为空 CSS 文件

Svelte 3: empty CSS file after build customComponent

svelte

svelte-component

svelte-3