Angular 8项目导入SCSS变量文件时变量未识别及注释报错问题咨询

问题根本原因 #

你当前组件样式文件使用.css后缀，Angular CLI默认会将其识别为标准CSS文件处理，而标准CSS不支持SCSS的单行注释语法、$变量定义/引用规则，这是两个报错的共同诱因。

具体解决步骤 #

• 修改组件样式文件后缀
  将nav-menu.component.css重命名为nav-menu.component.scss，同时修改nav-menu.component.ts中styleUrls配置的文件后缀对应为.scss：

@Component({
  selector: 'app-nav-menu',
  templateUrl: './nav-menu.component.html',
  styleUrls: ['./nav-menu.component.scss'] // 修改此处的样式文件后缀
})

• 全局配置Angular默认样式预处理器（可选）
  如果项目整体使用SCSS开发，可直接在angular.json中配置全局默认样式后缀，后续新建组件会自动生成.scss文件，避免重复修改：

{
  "projects": {
    "你的项目名称": {
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      }
    }
  }
}

• 优化SCSS变量导入路径（可选）
  可以在angular.json的样式预处理选项中配置SCSS全局导入路径，后续导入变量文件不需要写冗长的相对路径：

"stylePreprocessorOptions": {
  "includePaths": [
    "src/scss"
  ]
}

配置完成后导入语句可以直接简化为：

@import 'vars'; // 不需要写相对路径，也不需要加下划线和后缀

生效验证 #

修改完成后重启本地开发服务，_vars.scss中的//单行注释会被SCSS预处理器正常识别，$nav-xxx变量也可以正常引用不会抛出报错。

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