@Import scss，相对路径，angular-cli

Question

通过将带有@import 的*.css 文件导入.scss，我遇到了一些问题。 .css 文件里面有一些相对路径url('path') 属于导入的库，所以在node_modules 上。

我的 .component.scss 看起来像这样：

@import "~libName/dist/icon";

并且是由.component.ts 导入的，不过也无所谓。

而node_modules/libName/dist/icon.css有代码：

src: url("icons/SAP-icons.woff") format("woff");

在构建时会抛出无法解析文件的 错误

(Emitted value instead of an instance of Error) CssSyntaxError:，因为icons/icon.woff 在icon.css 找不到，因为相对路径错误。

angular v.7.3 使用 CLI。

Answer 1

你可以使用{}来引用项目路径的顶层

@import "{}/node_modules/module-name/stylesheet";