我该如何为stenciljs web组件添加通用css

Question

我正在创建一堆web组件，不知道如何为stenciljs web组件创建通用css。基于文档，我可以添加CCD_，但我似乎只能共享css变量。例如

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

如果我想拥有按钮的通用基础css，例如

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

我想在所有组件中分享|不确定如何实现这一点。提前感谢您的建议。

Answer 1

globalStyle样式表随应用程序一起分发，确实可以用于编写全局CSS。例如，对于www输出目标，它被生成为/build/<namespace>.css，然后你可以通过链接将其包含到你的应用程序中：

<link rel="stylesheet" href="/build/my-app.css" />

但是，您不能使用它为启用了Shadow DOM的自定义元素内的元素提供基本css(例如，如果组件装饰器中有shadow: true(。

---

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

// src/styles/partials/_button.scss
button {
border-radius: 5px;
padding: 2px 10px;
}

// src/components/my-button/my-button.tsx
@Component({
tag: my-button,
shadow: true,
styleUrl: 'my-button.scss',
})
export class MyButton {
render() {
return <button>Click me</button>
}
}

// src/components/my-button/my-button.scss
@use '../../styles/partials/button';

Answer 2

模具文档对此问题有点不清楚。我花了一段时间才意识到，globalStyle配置实际上并不能将全局样式应用于具有shadow DOM的组件。

如果您希望在所有组件中全局使用globalStyle，您可以尝试以下操作：

• 链接index.html中的globalStyle
• 同时链接每个组件内部的globalStyle

带有样式链接的组件可能看起来很奇怪，但它实际上是有效的。

render() {
return (
<Host>
<link rel="stylesheet" href="/build/my-app.css" />
RENDER THIS COMPONENT WITH GLOBAL STYLES
</Host>
);
}