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

Question

我刚刚创建了一个新的 Angular 17 项目，使用 SCSS 作为样式表格式，我想在我的项目中使用 Pico CSS。

Pico CSS 文档告诉我这样做：

首先，安装 Pico CSS。

npm install @picocss/pico

然后，使用 @use 将其导入到您的 SCSS 文件中。

@use "pico";

但是，这给了我以下错误：

✘ [ERROR] Can't find stylesheet to import.
  ╷
3 │ @use "pico";
  │ ^^^^^^^^^^^
  ╵
  src/styles.scss 3:1  root stylesheet [plugin angular-sass]

    angular:styles/global:styles:1:8:
      1 │ @import 'src/styles.scss';
        ╵         ~~~~~~~~~~~~~~~~~

在 Angular 中将 Pico CSS 添加到我的全局

styles.scss

的正确方法是什么？

Answer 1

将

@use "pico"

放入您的

@use "@picocss/pico/scss"

中，而不是

styles.scss

。

/* styles.scss */
@use "@picocss/pico/scss";