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

我通过以下方式将bulma纳入我的项目：

$ npm install bulma

之后，我如何在我的页面中引用它。我真的不知道如何与npm合作，所以请你指导我。我是否必须在js中引用它，并说：

从'bulma'导入bulma'

或需要它，我不知道我的文件在哪里。这意味着我不知道它们在哪里。

这只是CSS

Bulma是一个CSS框架

因此，您可以将其添加到

index.html

中，就像普通的css链接一样：

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

---

您可以在
projectName/node\u modules/bulma/css/bulma.css
找到最终的css构建

很有可能你正在使用一个文件加载器与网页和类似的。例如，如果在Vue项目中，您拥有该功能，则可以使用导入语法：

导入'bulma/css/bulma.css'

在js中。这是因为使用
import[xyz from]'xyz'
将查看
projectName/node\u modules/xyz
，对于css文件，就这么简单

如果尚未安装，则需要找到将其发送到客户端的方法。只需将
projectName/node\u modules/bulma/css/bulma.css
复制到
assets
或
public
或您使用的任何文件中的一个文件中，可能是
bulma.css
，然后像获取html中的任何css文件一样获取它：
在index.html文件中声明这一点对我来说很有效

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



在React中，我们必须在应用程序根所在的同一个html文件中声明这一点。
这确实是不可见的。如果您想通过
npm
获得
bulma
与
fontawesome5
一起工作，最低工作dep（目前）为：

然后需要像这样初始化：

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

fontawesome.library.add(solid)

更多细节可以在这里找到：
我在Vue中遇到了同样的问题，最后我解决了这个问题。对于Bulma，您只需运行：

$npm安装bulma

在
npm安装之后
，您的文件应该位于
node\u modules
文件夹下

对于Bulma，请检查您是否在
node_modules
下有一个文件夹
Bulma
，然后您可以在main.js文件中导入Bulma css框架，如下所示：
import././node_modules/Bulma/css/Bulma.css”

注意：即使在我提供的页面上，他们建议bulma的完整路径，但正如@Omkar所指出的，这不是一个好的实践，因此我最终导入bulma如下：
导入“bulma/css/bulma.css”
@import./node\u modules/bulma/css/bulma.css”

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

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

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



我更喜欢这样，因为bulma是一个CSS框架，我认为最好保持样式表相互链接。
备选答案：CSS预处理

我用了一种间接的方式来回答这个问题。我来这里是想看看如何在我的main
app.js
中使用渲染的SASS（在我的例子中，用于pug.js模板）

答案是：使用CSS预处理器。在这个最小的示例中，我将使用

0。安装：

npm安装节点sass
npm安装bulma

1。创建继承的样式

mystyles.scss
：

@charset“utf-8”；
@导入“node_modules/bulma/bulma.sass”；//如果我在后端框架中使用它呢。bulma的路径是什么？@d3cypher我编辑了答案，虽然我不明白你对后端框架的意思，因为这与客户端有关，它是css。希望我能帮助你@我的回答有用吗？您找到了吗？正如他所提到的，您可以在静态索引文件中添加
链接
。这种做法是否也用于生产级别，还是仅用于开发目的？以Vue.js为例，我可以在main.js中使用
从'Bulma'
导入Bulma，并且可以正常工作。如果OP已经使用npm安装。他可能不想使用CDN引入Bulma。不要建议初学者使用
。/../
相对路径。使用webpack，你可以使用别名你是说使用
@/./node\u modules/..
我可以编辑我的答案如果这是你建议的答案否，请查看相对路径与别名。NodeJS自动拾取节点模块，因此您不必提供完整的路径。无论哪种方式，即使它不是来自节点模块，建议使用模块绑定器提供的
别名
，以减少路径嵌套。当应用程序变大时，嵌套的实践最终会添加很多不可读的路径。当您同时启用扩展“Live Server”时，这在Visual Studio代码中非常有效。不需要为不健壮的东西安装和配置Webpack，特别是如果您只是想单独使用Bulma进行速成课程。谢谢
<link rel="stylesheet" href="/css/main.css">