Angular 8中导入SCSS文件失败，该如何解决？

核心问题分析 #

你遇到的ENOENT: No such file or directory., '/dev/null'错误，本质是因为你在后缀为.css的组件样式文件中尝试导入SCSS文件——Angular会把.css文件当作纯CSS处理，无法解析SCSS的语法和导入规则，最终导致预处理器处理失败，抛出这个看似奇怪的路径错误。另外，SCSS文件的路径配置也可能存在问题。

分步解决方案 #

• 第一步：将组件样式文件改为SCSS类型
  Angular组件要使用SCSS语法或导入SCSS文件，必须把样式文件的后缀从.css改成.scss，同时更新组件类中的styleUrls配置：

  1. 把dashboard.component.css重命名为dashboard.component.scss
  2. 在dashboard.component.ts中修改路径：

     @Component({
       selector: 'app-dashboard',
       templateUrl: './dashboard.component.html',
       styleUrls: ['./dashboard.component.scss'] // 这里改成.scss后缀
     })
     

• 第二步：确认SCSS文件的导入路径正确
  你当前用@import "lbd/variables";这种写法，Angular会从组件所在目录开始查找lbd文件夹。如果lbd文件夹在项目的其他位置（比如src/styles/lbd），需要调整为相对路径：

  // 假设lbd在src/styles/lbd下，从dashboard组件目录往上两级到src，再进入styles/lbd
  @import "../../styles/lbd/variables";
  @import "../../styles/lbd/mixins";
  // 其他文件同理修改路径
  

• 第三步：配置全局SCSS路径（可选，更便捷）
  为了不用每次写冗长的相对路径，可以在angular.json中配置stylePreprocessorOptions，让Angular自动识别SCSS文件的根目录：
  找到projects -> [你的项目名] -> architect -> build -> options，添加以下配置：

  "stylePreprocessorOptions": {
    "includePaths": [
      "src/styles/lbd" // 替换成你的lbd文件夹所在的绝对路径（相对于项目根目录）
    ]
  }
  

  配置完成后，你就可以直接用@import "variables";这种简洁写法导入文件了。

• 第四步：确保SCSS依赖已正确安装
  Angular 8需要对应的SCSS预处理器，如果你还没安装，执行以下命令安装（二选一即可）：

  # 使用node-sass（适用于Angular 8的常见版本）
  npm install node-sass --save-dev
  # 或者使用dart-sass（更现代的选择）
  npm install sass --save-dev
  

验证解决效果 #

完成以上步骤后，重启Angular开发服务器（ng serve），再查看Dashboard组件的样式是否正常加载，错误是否消失。

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