Parcel 搭配 SASS：如何无需波浪线从node_modules导入MDC Web样式？

我之前也碰到过完全一样的坑！Parcel 默认的 SASS 解析逻辑没法直接处理 MDC Web 这种以包名开头的 @import 路径，尤其是组件内部嵌套的依赖导入。下面是两个亲测有效的解决办法：

方法1：配置SASS的includePaths #

直接告诉SASS去node_modules目录里查找依赖包。你可以在项目根目录的package.json中添加以下配置：

"sass": {
  "includePaths": ["node_modules"]
}

配置完成后，你直接用官方文档里的写法就行：

@import "@material/textfield/mdc-text-field";

这样不仅你自己的导入能正常找到文件，MDC组件内部的@import "@material/animation/variables";这类嵌套导入也会自动去node_modules里搜索，不会再报错。

方法2：配置Parcel别名 #

如果第一种方法没生效，或者你想更明确地指定路径映射，可以在package.json里配置Parcel的别名：

"alias": {
  "@material": "./node_modules/@material"
}

这个配置会把所有以@material开头的导入，直接映射到node_modules下的对应目录，不管是你自己写的导入还是组件内部的依赖，都能被正确解析。

注意事项 #

不管用哪种方法，配置完之后一定要重启Parcel的开发服务器，不然Parcel可能不会加载新的配置。重启后再运行项目，应该就能正常编译所有MDC的样式了。

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