用本地存储的版本替换外部 css 库文件答案

【问题标题】：Replacing external css library file with a locally-stored version用本地存储的版本替换外部 css 库文件
【发布时间】：2019-05-11 00:18:42
【问题描述】：

我有一个 css 库，我直接将它导入到我的主 css 文件中，如下所示：

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css);

我想将它本地存储在我的项目中并从其文件夹中导入它

我尝试下载文件并将其存储在我的assets/css/ 目录中，然后在angular.json 中添加路径，如下所示：

"styles": [
  "src/styles.css",
  "src/assets/css/all.min.css"
],

但是在ng build 之后（它打印所有的css 文件然后清除终端然后没有错误）然后我启动ng serve 但我得到Failed to compile

如何以最干净的方式做到这一点？（不安装不需要的文件）

【问题讨论】：

@FIL 而且仅仅为了赢得声誉而进行编辑并不优雅。考虑改为回答问题。至于 OP，请详细说明您的问题，因为向您的构建添加 CSS 文件可能不是问题所在。
那你为什么对这个人自己编辑感到不安？
对不起，我拒绝了你的风格改变，因为你删除了一个你不应该删除的句子。我已经看到您希望我改进的内容，所以我为您重新编辑。我不知道你可以用这个赚钱我会更公平，如果这看起来很粗鲁，我很抱歉。 @trichetriche 谢谢你的澄清（顺便说一句，我是女孩）
@Takichiiii 没关系。我看到我错误地删除了太多，我试图重新编辑，但你的速度更快；）感谢您的澄清。

标签： css angular font-awesome

【解决方案1】：

如果您尝试仅下载 all.min.css，它将无法正常工作。您直接导入的 font-awesome css 包引用/依赖于其他在线包（例如 sprites 和 webfonts）。我的解决方案是使用npm package of font-awesome，或从github 获取。

从 all.css 中复制：

.fab {
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

【讨论】：

也许你应该上传一段代码来表明这个文件依赖于其他文件，因为现在看起来你假设它。但是支持依赖的想法！
谢谢，我不明白怎么做。我应该安装所有font-awesome (npm install font-awesome) 以及下一步该怎么做？谢谢
我已经从 git 下载了 webfonts 文件夹并将其放入 assets 中，我复制了您的代码 sn-p 并调整了项目中 webfonts 文件夹的路径。它仍然在构建时检索给我一个错误：ERROR in multi ./src/styles.css ./assets/css/all.min.css Module not found: Error: Can't resolve '
这个关于堆栈溢出的答案应该会有所帮助：stackoverflow.com/questions/49304017/… 或下面的链接：code.luasoftware.com/tutorials/npm/… 你不需要我的代码 sn-p。