css - 如何将已安装的 Bulma 包中的 SASS 合并到 Angular 应用程序中？

Question

我试图在我的元素中引入 bool 玛。根据文档，推荐的方法是使用 NPM 获取它。

yarn add bulma

进一步 down the docs ，它们显示了一个带有以下代码行的示例。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

据我所知，如果我们对其进行 CDN，NPM 包是多余的(相反，如果我们对其进行 NPM，则 CDN 是不必要的)。在这种特殊情况下，用户可能位于一堆棘手的防火墙之类的后面，因此无论如何应用 CDN 可能都行不通。我将不得不依靠自己分发的包。但是，当我删除上面的行时，样式消失了，并且由于 Bulma 的页面上没有如何处理它的信息，我不完全确定如何进行。

在 node_modules 中，有一个文件 bulma.sass 以及一组目录，其中包含用于构建大屁股文件的单个驴子。我想让它在我的元素中可用。我在谷歌搜索时看到了一系列不同的建议:从简单地将文件复制到我的 src 到关于应用 Grunt 脚本的冗长而复杂的讨论。不知何故，我觉得有一种简单的方法(可能我什至见过)，但我太困惑了，无法识别它。

如何将样式从已安装的包(驻留在 node_modules 中)转换到我的 Angular 应用程序的 src 和/或 dist 文件夹中？

额外的问题是当用于 Bumla 时我应该如何处理 FontAwesome 链接(除非它与其他框架的设置方式相同，在这种情况下，我可以自己谷歌它或问另一个问题。)

Answer 1

您需要在 .angular-cli.json 上声明自定义样式和脚本

例子:

 ...
 "prefix": "app",
 "styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.min.css"
 ]
 ...

重用 Angular 结构中已经存在的样式文件并根据需要导入外部样式文件的替代方法。

例子:

 ...
 "prefix": "app",
 "styles": [
     "styles.scss"
 ]
 ...

然后，在styles.scss中:

@import "../node_modules/bulma/bulma.sass"

这也允许挑选实际需要的 Bulma 部分(允许额外优化文件大小)。