【发布时间】：2018-05-24 09:13:02
【问题描述】：
我有一个打包为 npm 模块的 SCSS 库，它具有以下结构：
./index.scss
./partials/_foo.scss
./assets/foo.svg
而_foo.scss 包含图像的相对路径：
.foo {
background-image: url('../assets/foo.svg');
}
当我在 Angular 应用程序的 style.scss 中导入 index.scss 文件时，出现编译错误，因为编译器由于某种原因无法解析图像的路径，但是，路径是正确的（相对于原始 SCSS 文件）。
- 有没有办法帮助 Angular 正确解析此类图像？
- 有没有办法以某种方式改进库以使其更易于在 Angular 中使用？
我知道我可以使用一个变量来指定库中的基本路径，然后在我导入它的项目中覆盖它，但我宁愿不这样做，因为它会给库本身增加更多的混乱并要求最终开发人员覆盖该变量才能使用该库。
【问题讨论】：
-
如果您不想使用基本路径，最好将 svg 转换为 base64
-
@JohnVelasquez 如果它是一个大图像并且只是偶尔使用怎么办？
-
这真的取决于你，但我认为到目前为止将其转换为 base64 是最好的解决方案。
-
@JohnVelasquez 有没有办法在编译时自动将图像转换为 base64？
-
也不知道，你可以再问一个问题，也许有人可以帮助你。
标签： angular sass compilation