Stenciljs:动态加载styleUrl?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (135)

我正在使用stenciljs构建一个Web组件,我无法根据所谓的主题加载css主题文件。

@Component({
  tag: 'pm-header',
  styleUrl: 'pm-header.scss',
  shadow: true
})

export class PmHeader {

  @Prop() theme: string = 'default';

  ...

  render() {
    return (<nav class={this.theme}></nav>)
  }
}
提问于
用户回答回答于

在这种情况下,您的组件将始终加载找到的样式pm-header.scss

要根据主题自定义样式,我认为您有两种选择:

1 - 将所有主题放在里面pm-header.scss并使用Sass来保护每个主题:

nav.foo {
  // foo theme goes in here
}

nav.bar {
  // bar theme goes in here
}

2 - Stencil确实提供了一个styleUrls支持,表面上可以让你在加载时选择多个Sass文件。这是Ionic 4所采用的方法(在ios和材料设计之间; 这是一个例子),但我不相信它有关如何实现它的详细记录。你可能不得不在Ionic代码中挖掘这条路线。

扫码关注云+社区

领取腾讯云代金券