Angular 5中如何用SCSS变量统一管理assets/img资源路径？

完全没问题，把assets/img的路径存在SCSS变量里，能帮你彻底告别各个组件里五花八门的相对路径，后期维护也省心太多。下面给你一步步说怎么实现：

1. 在全局SCSS文件中定义路径变量 #

你的项目里已经有src/styles.scss这个全局样式文件了，直接在里面加个变量：

// src/styles.scss
// 这里的相对路径基于styles.scss的位置——它和assets同属src目录下，所以用./assets/img/就行
$assets-img-path: './assets/img/';

2. 在组件SCSS中使用这个变量 #

不管是component1还是嵌套的sub-component1，只要在它们的样式文件里直接调用这个变量就行，不用再费劲算相对路径：

// 比如component1.component.scss
.logo-container {
  background-image: url(#{$assets-img-path}logo.jpg);
  // 其他样式...
}

// 再比如sub-component1.component.scss
.header-logo {
  background: url(#{$assets-img-path}logo.jpg) no-repeat center;
}

这里用#{$变量名}的语法把变量插入到url里，SCSS会自动编译成正确的资源路径。

3. 额外补充：TS文件/模板里的路径统一 #

如果需要在组件的TS代码或者HTML模板里用这个路径（比如<img>的src绑定），可以在全局环境文件里再定义一个常量：

// src/environments/environment.ts
export const environment = {
  production: false,
  // 新增这个路径常量
  assetsImgPath: 'assets/img/'
};

然后在组件里引用：

// component2.component.ts
import { environment } from '../../environments/environment';

// 直接拼接路径
logoUrl = `${environment.assetsImgPath}logo.jpg`;

模板里就可以这么用：

<img [src]="logoUrl" alt="网站Logo">

一些实用注意事项 #

• 确保全局的styles.scss已经被项目正确加载，Angular默认会把它作为全局样式文件引入，不用额外配置；如果是其他框架，记得检查全局样式的引入方式。
• 后期如果assets/img的目录结构变了（比如移到assets/static/img），只需要修改全局变量/常量这一处，所有用到的地方都会自动更新，不用一个个组件去改。
• 变量名尽量清晰易懂，比如$assets-img-path，别用太模糊的命名，避免后期自己都忘了是什么意思。

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