Question

我试图在我的项目中引入Bulma。根据文档，推荐的方法是使用NPM获取它。

纱线添加宝马

进一步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 以及一组目录，其中包含用于构建大屁股文件的各个驴子。我想在我的项目中使它可用。当我用Google搜索时，我已经看到了一系列不同的建议：从简单地将文件复制到我的 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部分（允许进一步优化文件大小）。

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

1 个答案: