Svelte 3：在构建customComponent后清空CSS文件

我在苗条的构建过程中有一种奇怪的行为。我有一个苗条的

customComponent

在

Map.scss

中，只有一条规则需要测试，该规则应设置为背景黄色

正文{
背景：黄色；
}

下面是我的

rollup.config.js

来使用

npm run build

。。。
从“svelte preprocess”导入自动重新处理；
常数生产=！process.env.ROLLUP\u WATCH；
导出默认值{
输入：“src/main map.js”，
输出：{
格式：“iLife”，
文件：“public/build/dbconnect web map.js”，
},
插件：[
苗条的({
//不在生产环境中时启用运行时检查
戴夫：制作，
//我们将把任何组件提取到CSS中
//一个单独的文件-性能更好
对,，
css：（css）=>{
write（'public/build/dbconnectweb-map.css'）；
},
customElement：是的，
预处理：自动再处理({
/*选择权*/
}),
}),
...

CSS文件

dbconnect web map.CSS

是在

public/build/dbconnect web map.CSS

处生成的，但该文件的内容是空的。只有对

CSS.map

文件的建议存在

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

我认为

dbconnectweb-map.css.map

文件看起来不错，但我不确定

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

---

不知道为什么没有包含带有

主体的CSS规则。如果有人能帮助我，那就太好了。顺便说一句，我使用的是节点v12.18.0和npm v.6.14.4。我不知道这是否是一个问题，但我想把它放在这里，以便在您自己的方面进行测试。
请在文章末尾查看自定义元素特定差异/限制的列表

我认为与你相关的是：

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

这一点可能也很有趣：

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

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

另外，shadowdom不支持以可靠的跨浏览器方式提供样式表，因此我引用了第一个限制

从我对苗条定制元素的体验中，我个人的印象是，与文档中所述的标准元素相比，它们在行为上的差异甚至更大。我会尽可能避免使用它们。也许你应该重新检查为什么需要它们，以及是否真的需要它们，然后再花太多时间让它们发挥作用。Just我的2美分…
检查本手册末尾的自定义元素特定差异/限制列表

我认为与你相关的是：

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

这一点可能也很有趣：

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

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

另外，shadowdom不支持以可靠的跨浏览器方式提供样式表，因此我引用了第一个限制

从我对苗条定制元素的体验中，我个人的印象是，与文档中所述的标准元素相比，它们在行为上的差异甚至更大。我会尽可能避免使用它们。也许你应该重新检查为什么需要它们，以及是否真的需要它们，然后再花太多时间让它们发挥作用。Jus你需要：emitCss:true，你需要：emitCss:true，很高兴听到你的回答吗？如果答案解决了你的问题，你能接受吗？欢迎你，顺便说一句！很高兴听到。如果答案解决了你的问题，你能接受吗？欢迎你，顺便说一句！