1

我在苗条的构建过程中有一个奇怪的行为。我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": ""
}

不知道为什么body不包含一个 CSS 规则。当有人可以帮助我时会非常好。顺便说一句，我使用 node v12.18.0 和 npm v.6.14.4。我不知道这是否是一个问题，但我想把它放在这里在你自己这边进行测试。

4

1 回答 1

0

检查相应文档部分末尾的自定义元素特定差异/限制列表。

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

样式不是作为单独的 .css 文件提取出来，而是作为 JavaScript 字符串内联到组件中

这可能也很有趣：

样式被封装，而不仅仅是范围。这意味着任何非组件样式（例如您可能在 global.css 文件中的）都不会应用于自定义元素，包括带有 :global(...) 修饰符的样式

自定义元素不需要 CSS 作用域，因为它们是在 shadow DOM 中呈现的，它们的 CSS 在事实上被封装。

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

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

于 2020-06-10T22:40:06.793 回答