如何通过Sass Node命令行解析node_modules中的@use导入？

问题场景 #

创建Node项目并安装Material组件依赖：

mkdir sassplayground
cd sassplayground
npm i @material/button
npm i @material/theme

编写test.scss：

@use 'sass:map';
@use '@material/button/button' as mdc-button;

执行sass --watch test.scss:test.css时，出现错误：

Error: Can't find stylesheet to import.
  ╷
2 │ @use '@material/button/button' as mdc-button;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  test.scss 2:1  root stylesheet

尝试添加node_modules前缀修改test.scss：

@use 'sass:map';
@use 'node_modules/@material/button/button' as mdc-button;

又出现传递依赖错误：

Error: Can't find stylesheet to import.
   ╷
26 │ @use '@material/feature-targeting/feature-targeting';

解决方案 #

执行Sass编译命令时，通过--load-path（或简写-I）参数指定node_modules为模块加载路径，让Sass知道去哪里查找Material的Sass模块：

命令示例 #

# 完整参数写法
sass --watch --load-path=node_modules test.scss:test.css

# 简写参数写法
sass --watch -I node_modules test.scss:test.css

说明 #

• 指定加载路径后，test.scss无需修改，保持@use '@material/button/button' as mdc-button;即可
• Sass会自动在node_modules目录下查找所有以@material/开头的模块，包括组件内部的传递依赖（比如@material/feature-targeting），从而解决找不到样式文件的问题

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