Parcel 使用scss引用node_modules錯誤 Can't find stylesheet to import.@import "@material/elevation/mixins";

> parcel index.html --open

Server running at http://localhost:1234 
×  D:\WorkSpace\VSCode\project\src\base.scss:23:9: Can't find stylesheet to import.
   ╷
23 │ @import "@material/elevation/mixins";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵

原因

webpack有sassloader配置項可以include資源文件夾
Parcel 是簡化了配置過程 沒有直接提供配置文件

解決方案

1. 根目錄新建.sassrc.js 寫入以下內容

// .sassrc.js
const path = require('path')
const CWD = process.cwd()
module.exports = {
  "includePaths": [
    path.resolve(CWD, 'node_modules'),
    path.resolve(CWD, 'src')
  ]
}

可選的第二種方案

如果包中不含二級Import 直接在Scss文件 @import "~XXX/XXX/XXX.scss";~代表了node_modules/
直接按路徑寫就行，但是引入的文件中還有 import 這就不行了，請使用上面的方法

可能有用的網站

1. https://github.com/parcel-bundler/parcel/issues/39
2. https://github.com/material-components/material-components-web/issues/2800
3. https://github.com/parcel-bundler/parcel/issues/383

---