extensions - Después de instalar bulma a través de NPM, ¿cómo puedo referirlo en mi proyecto?

how to install bulma css

Question

He tirado bulma en mi proyecto a través de:

$ npm install bulma

Después de eso, ¿cómo puedo referirme a ello en mis páginas? Realmente no sé cómo trabajar con npm, así que por favor me pueden guiar. ¿Debo referirme a ello en mi js diciendo: import bulma from ''bulma'' o import bulma from ''bulma'' , no sé dónde están mis archivos? Eso significa que no sé dónde se encuentran.

Answer 1

Es solo CSS

Bulma es un framework CSS.

Así que puedes agregarlo solo en tu index.html como un enlace css normal:

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

Edición: ha instalado bulma en el entorno nodejs con el administrador de paquetes npm por lo que debe tener un directorio llamado node_modules y dentro del directorio bulma .

Answer 2

Eso es realmente incierto. Si desea que bulma trabaje con fontawesome5 través de npm , los mínimos de trabajo (por ahora) son:

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

entonces necesitaba ser inicializado así:

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

fontawesome.library.add(solid)

Más detalles se pueden encontrar aquí: https://fontawesome.com/how-to-use/use-with-node-js

Answer 3

Puede encontrar la compilación css final en projectName/node_modules/bulma/css/bulma.css .

Es probable que esté utilizando un cargador de archivos con webpack y similar. Si, por ejemplo, en un proyecto Vue, tiene eso, entonces puede usar la sintaxis de importación:

import ''bulma/css/bulma.css''

dentro de tus js. Esto funciona porque tener import [xyz from] ''xyz'' se verá en projectName/node_modules/xyz , y en el caso de un archivo css, ¡es tan simple como eso!

Si no tiene eso instalado, necesita encontrar una manera de enviarlo al cliente. Solo copie projectName/node_modules/bulma/css/bulma.css en un archivo, tal vez bulma.css , ya sea en assets o en public o lo que sea que use, luego busque el archivo css en el html: <link rel="stylesheet" href="/bulma.css">

Answer 4

Tuve el mismo problema en Vue y al final lo resolví gracias a este link . Para Bulma solo necesitas correr:

$ npm instalar bulma

Después de la npm install , sus archivos deben estar ubicados en la carpeta node_modules .

Para Bulma, verifique que tenga una carpeta bulma en node_modules , luego puede importar el framework bulma css en su archivo main.js de la siguiente manera: import "./../node_modules/bulma/css/bulma.css";

Nota : incluso si en el link proporcioné que sugieren el camino completo hacia bulma, esto no es una buena práctica, como lo señaló @Omkar, así que terminé importando bulma de la siguiente manera: import "bulma/css/bulma.css";

Answer 5

declarar esto en el archivo index.html funcionó para mí.

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

En React, tenemos que declarar esto en el mismo archivo html donde está presente la raíz de la aplicación.

Answer 6

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

Si tiene un archivo main.css para su proyecto o algo similar a eso, puede agregar la línea anterior dentro de su archivo main.css . Esto importará el archivo bulma.css predeterminado ubicado dentro de la ruta de su proyecto node_modules/bulma/css/ después de que haya instalado bulma a través de npm.

NOTA: debe incluir su archivo main.css (o algo similar) dentro de su index.html como una importación estática si decide ir por este camino. Para eso necesitas tener algo como:

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

Prefiero esto ya que Bulma es un marco CSS, creo que es mejor mantener las hojas de estilo vinculadas entre sí.