Question

我通过以下方式吸引了我的项目：

$ npm install bulma

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

Answer 1

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

Answer 2

这只是CSS。

Bulma是一个CSS框架。

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

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

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

Answer 3

这真的很不自在。如果您想通过bulma让fontawesome5与npm合作，那么最低工作时间（现在）是：

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 4

@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 5

我在Vue遇到了同样的问题，最后由于link我解决了它。对于Bulma，你只需要运行：

$ npm install bulma

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

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

注意：即使在我提供的link上他们建议了完整的bulma路径，这不是一个很好的做法，因为@Omkar指出，所以我最终导入bulma如下：import "bulma/css/bulma.css";

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文件处理为具有CSS缓冲区的Result对象。请注意，如果需要，node-sass也具有异步调用（sass.render()）。

3。使用CSS

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

上使用

console.write(rendered_style.css)

-注释-

SASS方法的好处是它可以解锁Customization，这正是布尔玛强大的功能！

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

Answer 7

在index.html文件中声明这个为我工作。

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

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

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

7 个答案: