Après avoir installé bulma à travers NPM, Comment puis-je le renvoyer dans mon projet
j'ai tiré dans bulma dans mon projet grâce à :
$ npm install bulma
Après cela, comment puis-je le consulter dans mes pages. Je ne sais vraiment pas comment travailler avec npm, alors s'il vous plaît pouvez-vous me guider. Dois-je en parler dans mon js en disant:
import bulma from 'bulma' ou besoin, je ne sais pas où sont mes fichiers sont. Cela signifie que je ne sais pas où ils se trouvent.
6 réponses
vous pouvez trouver la construction CSS finale à projectName/node_modules/bulma/css/bulma.css.
il y a des Chances que vous utilisiez un chargeur de fichiers avec webpack et similaire. Si, par exemple dans un projet Vue, vous avez cela, alors vous pouvez utiliser la syntaxe d'importation:
import 'bulma/css/bulma.css'
dans votre js. Cela fonctionne parce que d'avoir import [xyz from] 'xyz' regardez projectName/node_modules/xyz, et dans le cas d'un fichier css, c'est aussi simple que ça!
Si vous n'avez pas installé, vous devez trouver un moyen de l'envoyer à l' client. Il suffit de copier projectName/node_modules/bulma/css/bulma.css dans un fichier, peut-être bulma.css,assets ou public ou peu importe ce que vous utilisez, puis fetch it comme vous fetch n'importe quel fichier css dans le html: <link rel="stylesheet" href="/bulma.css">
c'est seulement CSS.
Bulma est un cadre CSS.
ainsi vous pouvez l'ajouter juste 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 dans nodejs environnement avec le gestionnaire de paquets npm vous devez donc avoir un répertoire appelé node_modules et dans le bulma répertoire.
C'est vraiment pas évident. Si vous souhaitez obtenir bulma travail fontawesome5 par npm minimum de travail deps (pour l'instant):
npm i -S bulma @fortawesome/fontawesome @fortawesome/fontawesome-free-solid
puis 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
@import "../node_modules/bulma/css/bulma.css";
Si vous avez un main.css fichier pour votre projet ou quelque chose de similaire à cela, vous pouvez ajouter la ligne ci-dessus à l'intérieur de votre main.css fichier. Cela permettra d'importer la valeur par défaut bulma.css fichier situé à l'intérieur du 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) à l'intérieur de votre index.html comme une importation statique si vous choisissez d'aller de cette façon.
Pour cela vous avez besoin d'avoir quelque chose comme:
<link rel="stylesheet" href="/css/main.css">
je préfère cela puisque bulma est un cadre CSS, je pense qu'il est préférable de garder les feuilles de style liées entre elles.
j'ai eu le même problème en Vue et à la fin, je l'ai résolu grâce à cette lien. Pour Bulma vous avez juste besoin de courir:
$ npm install bulma
Après npm install, vos fichiers doivent se trouver dans node_modules dossier.
pour Bulma, vérifiez que vous avez un dossier bulmanode_modules, alors vous pouvez importer bulma CSS framework dans votre main.fichier js comme suit: import "./../node_modules/bulma/css/bulma.css";
Remarque:: même si sur le lien j'ai fourni, suggèrent-ils, le chemin d'accès complet de bulma, ce n'est pas une bonne pratique que @Omkar souligné, alors j'ai fini par l'importation de bulma comme suit: import "bulma/css/bulma.css";
déclaration dans l'index.fichier html a fonctionné pour moi.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
À Réagir, nous devons le déclarer dans le même fichier html où la racine de l'application est présent.