如何为 stenciljs 网络组件添加通用 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:

将其包含到您的应用程序中

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

但是，您不能使用它为启用了阴影 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

Stencil 文档在这个问题上有点不清楚。我花了一段时间才意识到 globalStyle 配置实际上并没有做任何事情来将全局样式应用到带有阴影的组件 DOM.

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

Link index.html
还有 link 每个组件中的 globalStyle

组件的风格可能看起来很奇怪link，但它确实有效。

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

如何为 stenciljs 网络组件添加通用 css

Ho do I add common css for stenciljs web-components

css

sass

web-component

stenciljs