通过NPM安装bulma后,如何在我的项目中引用它

Question

我通过以下方式在项目中引入了bulma:

$ npm install bulma

之后,我如何在我的页面中引用它.我真的不知道如何使用npm,所以请你指导我.我是否必须在我的js中提及它: import bulma from 'bulma'或者要求它,我不知道我的文件在哪里.这意味着我不知道他们在哪里.

Answer 1

你可以找到最终的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任何你使用的文件中,然后像在html中获取任何css文件一样获取它:<link rel="stylesheet" href="/bulma.css">

Answer 2

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

如果您有main.css项目文件或类似文件，则可以在main.css文件中添加以上行。通过 npm 安装 bulma 后，这将导入bulma.css位于项目路径内的默认文件node_modules/bulma/css/。

注意：如果您选择这种方式，您必须将您的main.css文件（或类似的东西）index.html作为静态导入包含在您的文件中。为此，您需要具有以下内容：

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

我更喜欢这个，因为 bulma 是一个 CSS 框架，我认为最好保持样式表相互链接。

Answer 3

它只是 CSS。

Bulma 是一个 CSS 框架。

所以你可以index.html像普通的 css 链接一样添加它：

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

编辑：您已经使用包管理器bulma通过nodejs环境进行安装，npm因此您必须在该目录内有一个名为node_modules的bulma目录。