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

Question

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

纱线加毛

进一步向下的文档,它们显示出与下面的代码线的一例.

<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以及一组目录,其中包含用于构建大屁股文件的各个asses.我想在我的项目中使它可用.当我用谷歌搜索时,我已经看到了一系列不同的建议:从简单地将文件复制到我的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部分(允许额外优化文件大小).