如何为stenciljs web组件添加公共css

我正在创建一堆web组件，不知道如何为stenciljs web组件创建公共css。 根据文档，我可以添加

globalStyle:'src/global/app.css'

， 但我似乎只能共享css变量。e、 g

:root {
   --font_color: #484848;
   --bg_color--light: #f9f9f9;
}

如果我想有共同的基础css按钮，例如

button {
  border-radius: 5px;
  padding: 2px 10px;
}

我想在所有组件中分享这一点，但不知道如何实现这一点。

---

提前感谢您的建议。

globalStyle样式表随应用程序一起分发，确实可以用于编写全局CSS。例如。对于

www

输出目标，它将作为

/build/.css

生成，然后您可以通过以下链接将其包含到应用程序中：

但是，您不能使用它为启用了shadowdom的自定义元素内的元素提供基本css（即，如果您在组件装饰器中有

Shadow:true

）

---

因此，作为一个解决方案，您可以使用sass部分和模块来实现您想要做的事情

// src/styles/partials/_button.scss

button {
  border-radius: 5px;
  padding: 2px 10px;
}

//src/components/my-button/my-button.tsx
@组成部分({
标签：我的按钮，
影子：没错，
styleUrl:'我的按钮.scss'，
})
导出类MyButton{
render（）{
返回单击我
}
}

// src/components/my-button/my-button.scss

@use '../../styles/partials/button';