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

Question

我正在创建一堆网络组件，不确定如何为 stenciljs 网络组件创建通用 css。根据文档我可以添加 globalStyle: 'src/global/app.css',但似乎我只能共享 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 partials 和模块来实现您想要做的事情。

// 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';