Javascript 指向LitElement中样式化组件的SCSS外部链接

web组件的目的是将所有HTML/CSS/JS封装在一个地方，但我必须使用通用的SCSS文件，这些文件有很多变量，比如颜色、字体大小和其他很多东西。这是一个设计系统，它总是在变化。有没有插件或方法可以解决这个问题？

如果这些Sass文件的目的只是公开一些变量，那么最明智的做法可能是：它们是主题化Web组件的最有效的方法

@use 'sass:meta';
@use 'variables-file-1'; // Import the variable files
@use 'variables-file-2'; // as Sass modules
// ...

@mixin export-vars($module-name) {
  // Use module-variables() to extract a name-to-value map of the
  // variables declared in the module identified by $module-name
  @each $name, $value in meta.module-variables($module-name) {
    --#{$name}: #{$value}; // Define an equivalent CSS custom prop
  }
}


:root {
  @include export-vars(variables-file-1);
  @include export-vars(variables-file-2);
  // ...
}

然后，您可以导入已编译的CSS（在大多数情况下，

index.html

中的普通

是可以的，因为CSS自定义属性会跨越阴影DOM边界），并使用组件中的变量：

从'lit element'导入{LitElement，html，css，customElement}；
@customElement（“我的组件”）
导出类MyComponent扩展了LitElement{
静态样式=css`
：主持人{
颜色：var（--myvar，）；
}
`;
}

---

话虽如此，如果您需要在文字元素之间共享样式，也可以。

By

有很多变量

您的意思是这些SCSS文件只包含变量，还是也为某些元素设置样式？谢谢您的评论。确切地说，SCSS文件包括颜色和字体文件等。。。