我正在创建一堆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;
}
我想在所有组件之间共享|不确定如何实现。预先感谢您的建议。
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';