安装了Bulma之后，我该如何在我的项目中引用它？

Question

我已经通过以下方式在我的项目中引入了Bulma：

$ npm install bulma

之后，我该如何在我的页面中引用它。我真的不知道如何使用npm，请您指导一下。我是否需要通过以下方式在我的js文件中引用它：import bulma from 'bulma'或者是使用require方法，我不知道我的文件在哪里。这意味着我不知道它们的位置。

- TheBAST

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">

- towc

---

以Vue.js为例，我可以在main.js中只需使用import Bulma from 'bulma'即可使其正常工作。 - Jordan

Answer 2

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

如果你的项目有一个main.css文件或类似的文件，你可以在其中添加上述代码行。这将导入默认的bulma.css文件，该文件位于项目路径node_modules/bulma/css/中，前提是你已经通过npm安装了bulma。

注意：如果你选择这种方式，你必须将main.css文件（或类似文件）作为静态导入项包含在index.html中。你需要像下面这样做：

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

我更喜欢使用Bulma，因为它是一个CSS框架，我认为最好将样式表链接在一起。

- nipunshakya

---

当您同时启用扩展程序“Live Server”时，这在Visual Studio Code中运行得非常好。如果您只想使用Bulma进行速成课程，那么无需安装和配置Webpack等不稳定的东西。谢谢。 - klewis

Answer 3

这是纯CSS的。

Bulma是一个CSS框架。

因此，您可以像普通CSS链接一样将其添加到index.html中：

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

编辑：您已经通过包管理器 npm 在 nodejs 环境中安装了 bulma，因此您必须拥有一个名为 node_modules 的目录，并在其中找到 bulma 目录。

- ricopo

---

如果我在后端框架中使用它，那么Bulma的路径是什么？ - TheBAST

@d3cypher 我编辑了答案，尽管我不明白你所说的后端框架是什么，因为这与客户端有关，它是css。希望我能帮到你！ - ricopo

@d3cypher 我的回答有用吗？你找到了吗？ - ricopo

正如他所提到的，您可以在静态索引文件中添加“link”。 - Satej S

这种做法在生产级别中也使用吗，还是只用于开发目的？ - nipunshakya

Answer 4

这真的不明显。如果想要通过npm让bulma与fontawesome5一起工作，目前最小的工作依赖项如下：

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

然后需要像这样初始化：

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

fontawesome.library.add(solid)

更多细节可以在这里找到：https://fontawesome.com/how-to-use/use-with-node-js。

- Darwin

Answer 5

我在Vue中遇到了同样的问题，最终通过这个link解决了。对于Bulma，你只需要运行以下命令：

$ npm install bulma

npm install之后，你的文件应该位于node_modules文件夹下。

对于Bulma，请检查node_modules文件夹下是否有一个名为bulma的文件夹，然后可以在你的main.js文件中导入Bulma CSS框架，如下所示：import "./../node_modules/bulma/css/bulma.css";

注意：即使在我提供的link中他们建议使用完整路径到Bulma，但这不是一个好的做法，正如@Omkar指出的那样，所以我最终导入Bulma如下：import "bulma/css/bulma.css";

- dnhyde

---

不建议初学者使用 ../../ 相对路径。使用 webpack，您可以使用别名。 - Omkar

你的意思是使用 @/../node_modules/... 吗？如果是这样，我可以修改我的答案。 - dnhyde

不，看相对路径与别名。Node.js会自动捕捉节点模块，因此您无需提供完整路径。无论如何，即使它不是来自节点模块，也建议使用模块打包程序提供的“别名”来减少路径嵌套。当应用程序变得越来越大时，嵌套路径的实践最终会导致添加许多难以阅读的路径。 - Omkar

Answer 6

备选答案：CSS 预处理

我提供了一个有点间接的回答来解决这个问题。我来到这里是为了看看如何在我的主要app.js中使用渲染后的 SASS（在我的情况下，用于pug.js模板）。

答案是：使用CSS 预处理器。在这个最简单的例子中，我将使用 node-sass。

0. 安装：

npm install node-sass
npm install bulma

1. 创建继承样式

mystyles.scss:

@charset "utf-8";
@import "node_modules/bulma/bulma.sass"; // <--- Check and make sure this file is here after installing Bulma

这将继承Bulma安装的样式，但会用您在此处放置的样式来覆盖那些样式。

2. 构建CSS

app.js:

const nsass = require("node-sass");

const rendered_style = nsass.renderSync({ // <---- This call is synchronous!
  file: "./mystyles.scss",
});

在这里，node-sass正在将.scss文件处理为一个Result对象，该对象具有CSS缓冲区。请注意，如果需要，node-sass也有一个异步调用（sass.render()）。

3. 使用CSS

包含CSS的缓冲区现在可在rendered_style.css中使用。

console.write(rendered_style.css)

--注释--

SASS方法的好处在于它解锁了自定义，这也是Bulma强大的原因！

请记住，如果app.js是您的入口点，则每次运行服务器时都会呈现CSS。 如果您的样式不经常更改，最好将其写入文件中。 您可以在Bulma文档中查看我从中适应的内容中了解更多关于此方法的信息。

- Joe Sadoski

Answer 7

在index.html文件中声明这个对我有用。

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

在React中，我们必须在同一个HTML文件中声明这个，该文件中包含应用程序的根节点。

- Ram Pavan

---

如果OP已经使用npm安装了，他可能不想使用CDN来拉取Bulma。 - Drumbeg