我如何为stenciljs Web组件添加通用的CSS

问题描述 投票:0回答:1

我正在创建一堆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;
}

我想在所有组件之间共享|不确定如何实现。预先感谢您的建议。

css sass web-component stenciljs
1个回答
0
投票

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';
© www.soinside.com 2019 - 2024. All rights reserved.