Docker环境纯SCSS中导入Node安装的Pico CSS失败求助

方法一：用相对路径直接指向node_modules中的文件 #

修改你的main.scss导入语句：

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

在Docker容器里，node_modules和你的main.scss处于同一工作目录（/scss），这个相对路径能让Sass准确定位到Pico的SCSS文件。

方法二：给Sass命令添加加载路径参数（推荐） #

修改Dockerfile中的编译命令，通过--load-path指定node_modules作为Sass的查找目录：

RUN npx sass --style=compressed --load-path=node_modules main.scss /build.css

之后你就可以在main.scss里正常用包名导入：

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

这种写法更简洁，后续导入其他npm包的样式时也不用写冗长的路径。

为什么之前的写法无效？ #

原生Dart Sass（即你用npx sass调用的工具）默认不会自动扫描node_modules目录找样式文件。~前缀是Webpack这类构建工具的约定，原生Sass并不识别，所以加波浪线的写法自然没用。

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