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

Question

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

$ npm install bulma

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

Answer 1

只有CSS。

Bulma 是一个 CSS 框架。

因此，您可以像普通 css link:

一样将其添加到您的 index.html 中

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

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

Answer 2

您可以在 projectName/node_modules/bulma/css/bulma.css 找到最终的 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 或任何您使用的文件中，然后像获取任何 [=29= 一样获取它] html 中的文件：<link rel="stylesheet" href="/bulma.css">

Answer 3

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

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

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

Answer 4

这真是不言而喻。如果您想通过 npm 与 fontawesome5 一起工作 bulma，最低工作部门（目前）是：

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

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 指出的那样，这不是一个好的做法，所以我结束了按如下方式导入布尔玛：import "bulma/css/bulma.css";

Answer 6

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

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

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

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

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

Answer 7

备选答案：CSS预处理

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

答案是：使用一个CSSpre-processor。在这个最小的例子中，我将使用 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 方法的好处是它解锁了 Customization，这就是 Bulma 强大的原因！

请记住，如果 app.js 是您的入口点，则每次运行服务器时都会呈现 CSS。如果您的样式不经常更改，最好将其写到一个文件中。您可以在 Bulma Documenation I adapted this from.

中看到有关此方法的更多信息

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

After installing bulma through NPM, how can I refer it in my project

npm

bulma