StencilJS 组件可以使用外部主题吗？

Question

我正在尝试使用 StencilJS 为我正在处理的多个项目创建可重用的 Web 组件。但是我很难将颜色主题从我的主要应用程序继承到我的 Stencil 按钮组件。示例：我想为我的应用程序使用不同的主要和次要着色，这些应用程序适用于我的 Stencil 组件，如主要彩色按钮。但是我该如何做到呢？我正在使用 sass 样式，并在我的 Stencil 项目中使用我的主题在本地设置了主要变量。但是我不知道如何在编译后导入外部sass/css文件。

<my-button color="primary">This is a primary button</my-button>

Answer 1

一种选择是在定义组件时关闭 Shadow DOM。这将允许您的 Web 组件从正在使用该组件的应用程序继承 CSS。

@Component({
  tag: 'shadow-component',
  styleUrl: 'shadow-component.css',
  shadow: false
})