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

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?

Continue reading...