57

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

$ npm install bulma

之后，我如何在我的页面中引用它。我真的不知道如何使用 npm，所以请你指导我。我是否必须在我的 js 中通过说： import bulma from 'bulma'或要求它来引用它，我不知道我的文件在哪里。这意味着我不知道他们在哪里。

4

7 回答 7

60

您可以在projectName/node_modules/bulma/css/bulma.css.

您可能正在使用带有 webpack 和类似功能的文件加载器。如果，例如在一个 Vue 项目中，你有它，那么你可以使用 import 语法：

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

于 2017-06-24T12:01:20.027 回答
6

@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 框架，我认为最好保持样式表相互链接。

于 2018-08-12T03:59:21.420 回答
5

它只是CSS。

Bulma 是一个 CSS 框架。

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

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

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

于 2017-05-17T07:40:02.633 回答
2

这真的很不明显。如果你想通过 viabulma工作，最低工作部门（目前）是： fontawesome5npm

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

于 2018-04-12T12:13:17.313 回答
0

我在 Vue 中遇到了同样的问题，最后我通过这个链接解决了这个问题。对于布尔玛，您只需要运行：

$ npm 安装布尔玛

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

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

注意：即使在我提供的链接上，他们建议使用 bulma 的完整路径，正如@Omkar 指出的那样，这不是一个好习惯，所以我最终导入了 bulma，如下所示：import "bulma/css/bulma.css";

于 2018-05-02T17:17:51.327 回答
0

备选答案：CSS 预处理

我发布了一种有点间接的方式来回答这个问题。我来这里是想看看如何在我的 main 中使用渲染的 SASS app.js（在我的例子中，用于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文件处理为具有 CSS 缓冲区的Result对象。请注意，如果需要，它node-sass也有一个异步调用 ( )。sass.render()

3.使用CSS

包含 CSS 的缓冲区现在可以在rendered_style.css

console.write(rendered_style.css)

- 笔记 -

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

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

于 2020-08-07T06:21:04.513 回答
-3

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

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

在 React 中，我们必须在应用程序根目录所在的同一个 html 文件中声明它。

于 2017-10-25T19:32:53.933 回答