Import Pico CSS from node into custom SCSS file

[thcrt]

I have a Docker build process where SCSS is compiled to build a website. I want to base my CSS on Pico CSS. I'm not using Webpack or anything like that, just plain SCSS. I'm only using Node to install Pico.

Supposedly, I can include Pico CSS with the following directive:

@import "@picocss/pico/scss/pico";

However, it appears that the SCSS processor doesn't recognise it:

#0 0.370 Error: Can't find stylesheet to import.
#0 0.370   ╷
#0 0.370 1 │ @import "@picocss/pico/scss/pico";
#0 0.370   │         ^^^^^^^^^^^^^^^^^^^^^^^^^
#0 0.370   ╵
#0 0.370   main.scss 1:9  root stylesheet

It seems that I'm having trouble including Pico CSS because it gets installed by Node.

My Dockerfile looks like this:

FROM node:19-alpine as scss_build
WORKDIR /scss

# Install requirements
RUN npm install sass @picocss/pico

# Add SCSS
COPY static/scss .

# Build
RUN npx sass --style=compressed main.scss /build.css

# (Run the rest of the build)

I've tried using the trick mentioned in various places online to add a tilde in front of the import:

/* None of these work! */
@import "@picocss/pico/scss/pico";
@import "~@picocss/pico/scss/pico";
@import "~picocss/pico/scss/pico";

[MinichMykyta]

Did you resolve the issue?
If so, how?

[thcrt]

Sadly, I can't recall having solved this. I know that's not the answer you were looking for -- I'm sorry :/

[MinichMykyta]

No worries, I initially was looking for a way to simply import it into my regular css file, I guess I just forgot, how you are supposed to import things in css Ü
@import url("@picocss/pico")