Angular11从应用导入.scss文件导致库构建失败问题求助

问题根因 #

你当前配置的stylePreprocessorOptions仅作用于应用项目的运行/构建配置，Angular库的构建逻辑独立，不会继承应用的样式预处理器路径配置，因此ng serve运行正常，但库构建时无法识别导入路径。

解决方案 #

1. 打开angular.json文件，找到你的库对应的配置节点，路径为projects > 你的库名称 > architect > build > options，在该节点下新增和应用侧一致的样式预处理器路径配置：

"stylePreprocessorOptions": {
  "includePaths": ["projects/magic-string-example/src/app/styles", "node_modules/"]
}

2. 配置完成后重新执行库构建命令即可正常识别样式导入。

注意事项 #

如果你的库后续需要单独发布供外部项目使用，不建议直接引用当前应用目录下的样式文件，建议将公共的_variables.scss这类全局样式文件抽离到库的自有目录内，打包时同步导出样式资源，避免外部项目安装后同样出现样式找不到的问题。

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