S CSS external Ссылка на компонент стиля в LitElement - PullRequest
Новая
       51

S CSS external Ссылка на компонент стиля в LitElement

2 голосов
/ 01 апреля 2020

Целью веб-компонентов является инкапсуляция всех HTML / CSS / JS в одном месте, но я должен использовать общие файлы S CSS, которые имеют много переменных, таких как цвет, размер шрифта и много других вещей. Это система дизайна, и она постоянно меняется. Есть ли плагин или способ решить эту проблему?

1 Ответ

0 голосов
/ 06 апреля 2020

Если целью этих файлов Sass является только предоставление некоторых переменных, то, вероятно, самое разумное, что нужно сделать, это преобразование их в CSS пользовательских свойств : они рекомендуется и наиболее эффективный способ создания темы веб-компонентов. 

@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>);
    }
  `;

}

При этом, если вам нужно совместно использовать стили между LitElements, то также возможен .

...