Как добавить общий css для трафарета js веб-компонентов - PullRequest
Новая
       10

Как добавить общий css для трафарета js веб-компонентов

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

Я создаю кучу веб-компонентов, но не знаю, как создать общие css для трафарета js веб-компонентов. На основании документации я могу добавить globalStyle: 'src/global/app.css', но, похоже, я могу поделиться только css переменными. например, 

:root {
   --font_color: #484848;
   --bg_color--light: #f9f9f9;
}

, если я хочу иметь общую базу css для кнопок, например, 

button {
  border-radius: 5px;
  padding: 2px 10px;
}

, которой я хочу поделиться по всем компонентам | Не уверен, как этого добиться. Заранее спасибо за предложения.

1 Ответ

1 голос
/ 04 апреля 2020

Таблица стилей globalStyle распространяется вместе с вашим приложением и действительно может использоваться для написания глобальной CSS. Например для цели вывода www она генерируется как /build/<namespace>.css, и затем вы можете включить ее в свое приложение со ссылкой: 

<link rel="stylesheet" href="/build/my-app.css" />

Однако вы не можете использовать ее для предоставления базы css для элементов, которые находятся внутри пользовательского элемента с включенным Shadow DOM (т. е. если у вас shadow: true в компонентном декораторе).

Итак, в качестве решения вы можете использовать sass-частичные и модули для достижения что вы пытаетесь сделать. 

// src/styles/partials/_button.scss

button {
  border-radius: 5px;
  padding: 2px 10px;
}

// src/components/my-button/my-button.tsx

@Component({
  tag: my-button,
  shadow: true,
  styleUrl: 'my-button.scss',
})
export class MyButton {
  render() {
    return <button>Click me</button>
  }
}

// src/components/my-button/my-button.scss

@use '../../styles/partials/button';
...