Как установить и импортировать Bulma-расширения индивидуально (например, bulma-tooltip). Где мы должны сделать импорт для правильного функционирования

Question

<div class="column">
  <button class="button is-primary has-tooltip-multiline" data-tooltip="Tooltip with a long Text. So we use has-tooltip-multiline modifier to force multiline display.">Multiline Tooltip</button>
</div>

Под _sass / main.s css:

@import "../node_modules/bulma/bulma";

@import "bulma/sass/utilities/_all.sass";
@import "bulma/sass/grid/columns.sass";

@import 'bulma';
@import '~bulma-tooltip';

Я добавил последние две строки. Не знаю, верны ли они.

Также любые предложения для шкалы времени bulma ..

Я установил его, но не знаю, куда импортировать для его функционирования. Заранее спасибо

Answer 1

Если вы хотите использовать расширения Bulma, вы можете установить расширение следующим образом:

npm install bulma-tooltip

Затем в файле s css, куда вы импортируете bulma, необходимо импортировать расширение после ввоз булмы. Например, если ваш путь к булме равен

@import "../node_modules/bulma/bulma.saas";

, то пакет bulma-tooltip должен быть импортирован, как показано ниже:

// Import the complete extension
@import '../node_modules/bulma-tooltip/src/sass/index.sass';

ИЛИ

// Import only what you need from the extension
@import '../node_modules/bulma-tooltip/src/sass/_animation.sass';
@import '../node_modules/bulma-tooltip/src/sass/_responsiveness.sass';

Так что порядок в вашем файле s css должен быть следующим:

1) Настройка переменных sass

2) Импорт Bulma

3) Импорт расширений Bulma

Answer 2

Порядок должен быть, как показано ниже, вам не нужно импортировать полный модуль

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/button.sass";
@import "../node_modules/bulma/sass/elements/container.sass";
@import "../node_modules/bulma/sass/elements/title.sass";
@import "../node_modules/bulma/sass/form/_all.sass";
@import "../node_modules/bulma/sass/components/navbar.sass";
@import "../node_modules/bulma/sass/layout/hero.sass";
@import "../node_modules/bulma/sass/layout/section.sass";