Angular 17中如何将Pico CSS添加到全局SCSS样式表？

解决方法一：使用完整包路径导入 #

安装完成@picocss/pico后，直接在全局styles.scss中写入完整的包名路径进行导入：

@use "@picocss/pico";

解决方法二：配置路径别名简化导入 #

如果希望保留@use "pico";的简洁写法，可通过修改angular.json配置实现：

1. 找到项目配置下的build.options节点，新增或修改stylePreprocessorOptions
2. 添加includePaths指向Pico CSS所在的目录：

"build": {
  "options": {
    // 其他配置项...
    "stylePreprocessorOptions": {
      "includePaths": [
        "node_modules/@picocss"
      ]
    }
  }
}

配置生效后，就能在styles.scss中用@use "pico";正常导入样式了。

报错原因说明 #

出现「Can't find stylesheet to import」错误，是因为Angular的Sass编译器默认不会自动遍历所有node_modules包解析@use的短名称。必须指定完整包路径，或通过stylePreprocessorOptions告知编译器模块的查找目录。

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