How to add Pico CSS to your global scss stylesheet in Angular 17?

Question

I just created a new Angular 17 project with SCSS as the stylesheet format and I want to use Pico CSS in my project.

The Pico CSS documentation tells me do it like this:

First, install Pico CSS.

npm install @picocss/pico

Then, import it in your SCSS file with @use.

@use "pico";

However, this gives me the following error:

✘ [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';
        ╵         ~~~~~~~~~~~~~~~~~

What is the correct way to add Pico CSS to my global styles.scss in Angular?

Answer 1

Instead of @use "pico", put @use "@picocss/pico/scss" in your styles.scss.

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