javascript - SCSS 外部链接到 LitElement 中的样式组件

Question

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

Answer 1

如果这些 Sass 文件的目的是仅暴露一些变量，那么最明智的做法可能是 converting them to CSS custom properties : 他们是 recommended以及为 WebComponents 设置主题的最有效方式。

@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(在大多数情况下，<link> 中的普通 index.html 没问题，因为 CSS 自定义属性跨越阴影 DOM 边界)并在您的组件中使用变量:

import { LitElement, html, css, customElement } from 'lit-element';

@customElement('my-component')
export class MyComponent extends LitElement {

  static styles = css`
    :host {
      color: var(--my-var, <fallback-value>);
    }
  `;

}

话虽如此，如果您需要在 LitElement 之间共享样式，is possible