Angular中全局变量定义的图片路径无法解析问题

问题根源 #

错误提示显示Webpack在src/assets/sass/core/components/目录下拼接了你的图片路径，生成了错误的路径./assets/sass/core/components/assets/media/misc/landscape.png——这是因为Webpack处理CSS中的url()时，默认会相对于当前SCSS文件的位置解析路径，而你的变量里写的是相对项目根的路径，导致路径重复拼接。

解决方案 #

方案1：使用绝对根路径（推荐）

Angular编译后，src/assets目录会被部署到应用的根目录下，直接使用以/开头的绝对路径，让Webpack从应用根目录解析资源：

修改_variables.scss中的变量：

$login-main-bg-img: "/assets/media/misc/landscape.png";
$login-main-bg-img-dark: "/assets/media/misc/landscape_dark.jpg";

保持_root.scss和组件SCSS的代码不变即可，Webpack会正确识别根路径下的资源。

方案2：使用相对当前SCSS文件的路径

因为_root.scss位于src/assets/sass/core/components/，要指向src/assets/media/目录，需要向上回溯3级目录：

修改_variables.scss：

$login-main-bg-img: "../../../media/misc/landscape.png";
$login-main-bg-img-dark: "../../../media/misc/landscape_dark.jpg";

这种方法的缺点是如果后续调整SCSS文件的目录结构，需要同步修改相对路径。

方案3：正确使用Angular的~别名

Angular中~指向项目的src目录，变量路径写成~assets/...（注意不要加src，因为~已指向src目录）：

修改_variables.scss：

$login-main-bg-img: "~assets/media/misc/landscape.png";
$login-main-bg-img-dark: "~assets/media/misc/landscape_dark.jpg";

默认Angular配置中sass-loader已支持该别名，无需额外配置。

验证 #

修改后重新运行ng serve，Webpack会正确解析图片路径，背景图可正常加载且不再抛出路径错误。

内容的提问来源于stack exchange，提问作者Zubair Jamil