angular.json配置的includePaths无法引入node_modules下样式文件如何解决

解决方案 #

• 同步配置serve节点的样式预处理参数
  你当前只配置了architect.build.options下的stylePreprocessorOptions，Angular本地开发启动的ng serve命令会读取architect.serve.options下的独立配置，需要将相同的stylePreprocessorOptions配置复制到serve节点下，测试环境需要的话也要同步到test节点。
  完整配置示例：

{
  "projects": {
    "my-project": {
      "root": "",
      "sourceRoot": "src",
      "prefix": "mp",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/selenium-agent-ui",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/assets",
                "./node_modules/ui-library/assets"
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/assets",
                "./node_modules/ui-library/assets"
              ]
            }
          }
        }
      }
    }
  }
}

• 修正导入路径的前缀
  includePaths配置的是Sass查找文件的根目录，你已经将node_modules/ui-library/assets和src/assets加入查找路径，导入时不需要再加assets/前缀，否则Sass会尝试在上述两个目录下再找一层assets子目录，导致路径不匹配。
  正确的导入写法为：

@import "ui-library-folder/ui-library-scss-file";

• 重启开发服务
  修改angular.json配置后，必须手动停止当前的ng serve进程，重新启动才能让配置生效。

• 检查大小写与拼写
  确认库名、目录名、文件名的大小写与实际文件完全匹配，类Unix系统对路径大小写敏感，拼写错误也会导致找不到文件。

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