Angular scss url（），在构建项目时无法解析相对路径答案

【问题标题】：Angular scss url(), cant resolve relative path when project is buildAngular scss url（），在构建项目时无法解析相对路径
【发布时间】：2022-02-14 05:48:58
【问题描述】：

我有一个充满 svg 的文件夹（路径：src/assets/icons）。 css函数url()是这样实现的：

url("/assets/icons/CheckSmall.svg");

当我运行 ng serve 时，它会找到 svg 数据。但是当我构建我的项目时，它找不到 svg 数据。虽然它存在于文件夹 dist/myApp/assets/icons/CheckSmall.svg

我阅读了许多论坛和讨论并测试了一些东西（discussions 之一）。

例如，我使用了不同的路径“策略”：

 1. url("^assets/icons/CheckSmall.svg")
 2. url("~/assets/icons/CheckSmall.svg")

对于数字 (1)，它似乎不是 Angular 中支持的功能，这就是我不想使用它的原因。对于 (2)，它会复制我的资产并将它们放入文件夹 dist/myApp。

是否有可行的（支持或记录的）替代方案？或者我可以以某种方式调整 angular.json。

【问题讨论】：

标签： css angular url build relative-path

【解决方案1】：

尝试使用以下语法：

background-image: url('../../assets/icons/<file-name>')

路径相对于css 文件的位置

如果您在构建过程中设置非默认 baseHref 或 deployUrl 标志，也会对其产生影响

尝试在 styles.scss 或相关组件中使用该方法，而不使用 scss 变量。 scss变量用于不同文件夹时，相对路径不正确

【讨论】：

对我不起作用... ./src/styles.scss - 错误：模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： ModuleError：模块错误（来自 ./node_modules/postcss-loader/dist/cjs.js）：C:\Users\USER\Desktop\PROJECTNAME\node_modules\bootstrap\scss\forms_form-check.scss:58:8: Can' t 在 Object.emitError (C:\Users\USER\Desktop\PROJECTNAME\node_modules \webpack\lib\NormalModule.js:562:6) ...
引导程序如何影响该错误？ node_modules/bootstrap/assets/。我使用的相对路径只是一个例子，以防你直接使用它
它可能来自我的 Bootstrap 样式。也许我添加的屏幕截图有更多帮助。