我通过以下方式在我的项目中引入了 bulma:
$ npm install bulma
之后,我如何在我的页面中引用它。我真的不知道如何使用 npm,所以请你指导我。我是否必须在我的 js 中通过说:
import bulma from 'bulma'
或要求它来引用它,我不知道我的文件在哪里。这意味着我不知道他们在哪里。
您可以在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">
@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 框架,我认为最好保持样式表相互链接。
它只是CSS。
Bulma 是一个 CSS 框架。
所以你可以index.html
像普通的css链接一样添加它:
<link rel="stylesheet" type="text/css" href="your/bulma/path/bulma.css />
编辑:您已经bulma
通过nodejs环境安装了包管理器npm
,因此您必须有一个名为node_modules的目录并在该bulma
目录内。
这真的很不明显。如果你想通过 viabulma
工作,最低工作部门(目前)是: 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
我在 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";
备选答案: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 文档中看到有关此方法的更多信息。
在 index.html 文件中声明这一点对我有用。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
在 React 中,我们必须在应用程序根目录所在的同一个 html 文件中声明它。