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

Question

我正在创建一堆 Web 组件，不知道如何为 stenciljs Web 组件创建通用 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 部分和模块来实现您想要做的事情。

// src/styles/partials/_button.scss

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

// src/styles/partials/_button.scss

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

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

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