web-dev-qa-db-fra.com

Après avoir installé bulma via NPM, comment puis-je le référencer dans mon projet

J'ai tiré dans bulma dans mon projet à travers:

$ npm install bulma

Après cela, comment puis-je y faire référence dans mes pages. Je ne sais vraiment pas comment travailler avec npm, merci de me guider. Dois-je y faire référence dans mon js en disant: import bulma from 'bulma' ou si vous en avez besoin, je ne sais pas où sont mes fichiers. Cela signifie que je ne sais pas où sont-ils situés.

npmbulma
39
TheBAST

Vous pouvez trouver la version css finale à l'adresse projectName/node_modules/bulma/css/bulma.css.

Il est fort probable que vous utilisiez un chargeur de fichiers avec Webpack et similaire. Si, par exemple, dans un projet Vue, vous pouvez l'avoir, vous pouvez utiliser la syntaxe d'importation:

import 'bulma/css/bulma.css'

dans votre js. Cela fonctionne car avoir import [xyz from] 'xyz' va regarder projectName/node_modules/xyz, et dans le cas d’un fichier css, c’est aussi simple que cela!

Si vous ne l'avez pas installé, vous devez trouver un moyen de l'envoyer au client. Il suffit de copier projectName/node_modules/bulma/css/bulma.css dans un fichier, peut-être bulma.css, dans un assets ou public ou quoi que vous utilisiez, récupérez-le comme si vous récupériez un fichier CSS dans le code HTML: <link rel="stylesheet" href="/bulma.css">

44
towc

C'est CSS seulement.

Bulma est un framework CSS.

Vous pouvez donc l'ajouter simplement dans votre index.html comme un lien css normal:

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

Edit: Vous avez installé bulma via l’environnement nodejs avec le gestionnaire de paquets npm. Vous devez donc disposer d’un répertoire appelé node_modules et à l’intérieur du répertoire. bulma répertoire.

3
ricopo

C'est vraiment pas évident. Si vous voulez obtenir bulma travaillez avec fontawesome5 via npm, le nombre minimum de postes de travail (pour l’instant) est:

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

ensuite besoin d'être initialisé comme ceci:

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

fontawesome.library.add(solid)

Plus de détails peuvent être trouvés ici: https://fontawesome.com/how-to-use/use-with-node-js

2
Darwin

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

Si tu as un main.css fichier pour votre projet ou quelque chose de similaire, vous pouvez ajouter la ligne ci-dessus à l'intérieur de votre main.css fichier. Cela importera la valeur par défaut bulma.css fichier situé dans le chemin de votre projet node_modules/bulma/css/ après avoir installé bulma via npm.

NOTE: vous devez inclure votre main.css fichier (ou quelque chose de similaire) dans votre index.html _ comme une importation statique si vous choisissez cette option. Pour cela, vous devez avoir quelque chose comme:

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

Je préfère cela car bulma est un framework CSS, je pense qu'il est préférable de garder les stylesheets liés les uns aux autres.

1
nipunshakya

J'ai eu le même problème dans Vue et finalement je l'ai résolu grâce à ceci lien . Pour Bulma, il vous suffit de lancer:

$ npm installer bulma

Après npm install, Vos fichiers doivent être situés dans le dossier node_modules.

Pour Bulma, vérifiez que vous avez un dossier bulma sous node_modules, Vous pouvez alors importer le framework Bulma css dans votre fichier main.js comme suit: import "./../node_modules/bulma/css/bulma.css";

Remarque : même si sur le lien je suggère qu'ils suggèrent le chemin complet vers bulma ce n'est pas une bonne pratique car @Omkar fit remarquer, alors je finis par importer bulma comme suit: import "bulma/css/bulma.css";

0
dnhyde