Après l'installation de bulma par MNP, comment puis-je le renvoyer dans mon projet

Question

J'ai tiré dans bulma dans mon projet par le biais de :

$ npm install bulma

Après cela, comment puis-je le consulter dans mes pages. Je ne sais vraiment pas comment travailler avec les mnp, de sorte 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.

Answer 1

Vous pouvez trouver la dernière css construire, projectName/node_modules/bulma/css/bulma.css.

Les Chances sont que vous êtes à l'aide d'un fichier loader avec webpack et similaires. Si, par exemple, dans un projet Vue, vous avez, alors vous pouvez utiliser l'importation de syntaxe:

import 'bulma/css/bulma.css'

au sein de votre js. Cela fonctionne parce que d'avoir import [xyz from] 'xyz' examinera 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 au client. Il suffit de copier projectName/node_modules/bulma/css/bulma.css dans un fichier, peut-être bulma.css, soit une assets ou public ou ce que vous utilisez, puis aller la chercher comme vous le feriez pour extraire les fichier css dans le code html: <link rel="stylesheet" href="http://stackoverflow.com/bulma.css">

Answer 2

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

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

REMARQUE: vous devez inclure votre main.css le fichier( ou quelque chose de similaire) à l'intérieur de votre index.html statique de l'importation si vous avez choisi d'aller dans cette voie. Pour cela vous devez avoir quelque chose comme:

<link rel="stylesheet" href="http://stackoverflow.com/css/main.css">

Je préfère ce depuis que bulma est un framework CSS, je pense que c'est mieux de garder les feuilles de style liées uns avec les autres.

Answer 3

C'est CSS.

Bulma est un framework CSS.

Ainsi, vous pouvez l'ajouter simplement dans votre index.html comme un simple lien css:

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

Edit: Vous avez installé bulma grâce à la nodejs environnement avec le gestionnaire de paquet npm de sorte que vous devez avoir un répertoire node_modules et à l'intérieur de l' bulma répertoire.

Answer 4

C'est vraiment unevident. Si vous souhaitez obtenir de l' bulma travailler avec fontawesome5 par npm, minimum de travail deps (pour l'instant) sont:

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

Answer 5

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

$ npm install bulma

Après l' npm install, vos fichiers doivent se trouver dans node_modules le dossier.

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

Remarque: même si sur le lien que j'ai fournis, 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";