После установки bulma через NPM, как я могу ссылаться на него в своем проекте

Я вытащил bulma в своем проекте через:

$ npm install bulma

после этого, как я могу ссылаться на него в своих страницах. Я действительно не знаю, как работать с npm, поэтому, пожалуйста, вы можете направлять меня. Должен ли я ссылаться на это в своем js, говоря: import bulma from 'bulma' или требовать его, я не знаю, где мои файлы. Это значит, что я не знаю, где они находятся.

25
bulma npm

6 ответов

вы можете найти окончательную сборку css в projectName/node_modules/bulma/css/bulma.css.

скорее всего, вы используете загрузчик файлов с webpack и подобные. Если, например, в проекте Vue у вас есть это, вы можете использовать синтаксис импорта:

import 'bulma/css/bulma.css'

в вашем js. Это работает, потому что import [xyz from] 'xyz' рассмотрим projectName/node_modules/xyz, и в случае файла css, это так просто!

если вы не установили это, вам нужно найти способ отправить его в клиент. Просто скопируйте projectName/node_modules/bulma/css/bulma.css в файл, может быть bulma.css, либо assets или public или все, что вы используете, а затем получить его, как вы бы получить любой файл css в html:<link rel="stylesheet" href="/bulma.css">

29

это только CSS.

Bulma-это фреймворк CSS.

таким образом, вы можете добавить его только в свой index.html как обычная ссылка css:

<link rel="stylesheet" type="text/css" href="your/bulma/path/bulma.css />

Edit: вы установили bulma до nodejs среда с менеджером пакетов npm таким образом, у вас должен быть каталог под названием папки node_modules и внутри

2

это действительно неочевидны. Если вы хотите получить bulma работы с fontawesome5 via npm, минимальные рабочие deps (на данный момент):

npm i -S bulma @fortawesome/fontawesome @fortawesome/fontawesome-free-solid

затем необходимо было инициализировать следующим образом:

import fontawesome from '@fortawesome/fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import 'bulma/css/bulma.css'

fontawesome.library.add(solid)

более подробную информацию можно найти здесь: https://fontawesome.com/how-to-use/use-with-node-js

1

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

если у вас main.css файл для вашего проекта или что-то подобное, вы можете добавить вышеуказанную строку внутри вашего . Это импортирует значение по умолчанию bulma.css файл, расположенный внутри пути вашего проекта node_modules/bulma/css/ после установки bulma через npm.

Примечание: Вы должны включить свое main.css файл (или что-то подобное) внутри вашего index.html как статический импорт, если вы решили пойти этим путем. Для этого нужно что-то иметь например:

<link rel="stylesheet" href="/css/main.css">

Я предпочитаю это, так как bulma-это CSS-фреймворк, я думаю, что лучше держать таблицы стилей связанными друг с другом.

0

у меня была такая же проблема в Vue и в конце концов я решил благодаря этому ссылке. Для Bulma вам просто нужно запустить:

$ npm установить bulma

после npm install, ваши файлы должны находиться под node_modules папка.

для Bulma, убедитесь, что у вас есть папка bulma под node_modules, затем вы можете импортировать структуру bulma css в свой основной.файл js выглядит следующим образом:import "./../node_modules/bulma/css/bulma.css";

Примечание: даже если на ссылке Я при условии, что они предлагают полный путь к bulma это не хорошая практика, как отметил @Omkar, поэтому я закончил импорт bulma следующим образом:import "bulma/css/bulma.css";

0

объявление этого в индексе.html-файл работал на меня.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">

в React мы должны объявить это в том же html-файле, где присутствует корень приложения.

-2