Parcel importing material-components-web scss files installed to node_modules not working - sass

Question

I have installed material-selected as instructed here, by running the command:
npm install #material/select
I have included the html for select and set the width of it. And in my sass file I have imported material styling like suggested in the documentation:
#use "#material/list/mdc-list";
#use "#material/menu-surface/mdc-menu-surface";
#use "#material/menu/mdc-menu";
#use "#material/select/mdc-select";
But, when I am trying to build my project with parcel, I get the error:
Can't find stylesheet to import.
#use "#material/list/mdc-list";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
src/scss/app.scss 1:1 root stylesheet
How am I suppose to import this stylesheets?
I have tried with tilde operator as well:
#use "~#material/list/mdc-list";
#use "~#material/menu-surface/mdc-menu-surface";
#use "~#material/menu/mdc-menu";
#use "~#material/select/mdc-select";
But, that didn't help either, then I got::
#use "#material/density/functions" as density-functions;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
node_modules/#material/list/_mixins.scss 22:1 #use
node_modules/#material/list/mdc-list.scss 21:1 #use
src/scss/app.scss 1:1 root stylesheet
Error: Can't find stylesheet to import.
#use "#material/density/functions" as density-functions;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
node_modules/#material/list/_mixins.scss 22:1 #use
node_modules/#material/list/mdc-list.scss 21:1 #use
src/scss/app.scss 1:1 root stylesheet
Also in my vs code editor I get warning that the #use is unknown rule:
Unknown at rule #usescss(unknownAtRules)
I am not sure why do I get that.

Answer 1

When using Parcel bundler you'll also need to provide import path configuration. See Parcel docs for more details on how to configure Sass.
Add .sassrc.js file to your project root folder and include following lines:
const path = require('path')
const CWD = process.cwd()
module.exports = {
"includePaths": [
path.resolve(CWD, 'node_modules'),
path.resolve(CWD, 'src')
]
}
Here is a full example on Glitch.