Angular 4项目中如何在SCSS文件间共享$变量？

我来帮你搞定这个SCSS变量报错的问题，这种情况在Angular 4里挺常见的，核心是组件SCSS的作用域和全局导入配置的问题，咱们一步步来解决：

问题根源 #

虽然你已经在styles.scss里导入了variables.scss，也通过angular-cli.json全局引入了styles.scss，但Angular的组件SCSS文件是独立作用域的——它们不会自动继承全局SCSS文件里的导入内容，除非你明确配置或者手动导入变量文件。

具体解决方案 #

方案1：手动在组件SCSS中导入变量文件 #

这是最直接快速的办法，只需要在header.scss的最顶部加上变量文件的导入语句就行：

// 根据你的实际文件结构调整路径，比如variables.scss在src/styles下，header组件在src/app/header
@import '../../styles/variables.scss';

这样header.scss就能直接访问$primary变量了，注意一定要核对路径的正确性，路径错了也会导致变量找不到。

方案2：配置Angular CLI实现全局自动导入 #

如果不想每个组件都手动写导入语句，可以修改angular-cli.json，让所有SCSS文件自动识别全局变量：

1. 打开angular-cli.json，找到apps数组下的对应配置项
2. 添加stylePreprocessorOptions配置，指定变量文件所在的目录：

"apps": [
  {
    // 确保styles数组已经包含styles.scss
    "styles": [
      "styles/styles.scss"
    ],
    "stylePreprocessorOptions": {
      "includePaths": [
        "./src/styles" // 这里填写variables.scss所在的目录路径
      ]
    }
  }
]

配置完成后，你在任何组件SCSS里都能用上更简洁的导入方式：

@import 'variables'; // 不用写完整的相对路径

⚠️ 重点提醒：修改angular-cli.json之后，必须重启Angular CLI开发服务，否则新配置不会生效！

额外要检查的细节 #

• 先确认variables.scss里的变量名是$primary而不是拼写错误（报错信息显示$primar...，看起来少了最后一个字母y？一定要仔细核对变量名）
• 检查styles.scss里的导入语句是否正确：@import './variables.scss';（路径和文件名都不能出错）

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