如何使用Yarn PNP引入CSS文件？解决reset-css与Sass导入问题

1. 定位reset-css的文件路径 #

Yarn PNP环境下没有传统的node_modules文件夹，你可以通过以下方式快速找到reset.css的位置：

• 运行命令查看包的文件列表：

  yarn info reset-css files
  

  输出里会包含reset.css的相对路径（通常是包根目录下的reset.css）。
• 更便捷的方式是依赖Yarn PNP的自动寻址能力——不需要手动找路径，直接通过包名引用即可。

2. 在SCSS文件中导入reset-css #

根据Sass的使用习惯，推荐两种导入方式：

方式一：使用@import #

直接通过包名导入reset.css，Yarn PNP会自动解析包的位置：

@import 'reset-css/reset.css';

如果你的Sass版本支持，也可以省略.css后缀简化写法：

@import 'reset-css';

注意：如果用Webpack、Vite等构建工具集成Sass，确保工具已适配Yarn PNP（多数现代工具原生支持，或可通过pnpify包装构建命令），这样Sass才能正确识别包路径。

方式二：使用@use（针对CSS文件的写法） #

@use主要用于Sass模块导入，针对CSS文件需要配合url()语法：

@use url('reset-css/reset.css');

这种写法不如@import直接，更推荐用第一种方式导入纯CSS文件。

额外注意事项 #

• 执行Sass构建命令时，需要适配Yarn PNP：比如将sass src/style.scss dist/style.css改为yarn pnpify sass src/style.scss dist/style.css，确保Sass能通过PNP解析器找到依赖包。
• 如果使用React、Vue等框架，确认框架的构建工具已支持Yarn PNP，目前Vite、Next.js等主流框架都已原生支持，无需额外配置。

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