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

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

Answer 2

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

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

注意:如果选择这样做，则必须将main.css文件(或类似的文件)包含在index.html中作为静态导入。为此，你需要有这样的东西：

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

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

Answer 3

只有CSS。

Bulma是一个CSS框架。

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

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

编辑:您已经通过nodejs环境和包管理器npm安装了npm，所以必须在bulma目录中有一个名为node_modules的目录。