Exploring the capabilities of SASS through material web components has been quite intriguing.
To begin, I initiated a new node project in the following manner:
mkdir sassplayground
Then, I installed the necessary dependencies:
cd sassplayground
npm i @material/button
npm i @material/theme
When attempting to execute sass --watch test.scss:test.css with the content below on test.scss:
@use 'sass:map';
@use '@material/button/button' as mdc-button;
An error was encountered:
Error: Can't find stylesheet to import.
╷
2 │ @use '@material/button/button' as mdc-button;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
test.scss 2:1 root stylesheet
To correct this issue, I appended node_modules before the path, resulting in:
@use 'sass:map';
@use 'node_modules/@material/button/button' as mdc-button;
However, this adjustment led to a transitive dependency error like so:
Error: Can't find stylesheet to import.
╷
26 │ @use '@material/feature-targeting/feature-targeting';
How can we effectively manage SASS dependencies from within node_modules?