4

I am using Parcel with SASS, and I am trying to use the material-components-web (MDC Web).

In the guide of MDC Web they say you should import the modules that come with this package like this inside your stylesheets:

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

But when I try this and I run parcel, I get this error message:

Can't find stylesheet to import.
  ╷
2 │ @import "@material/textfield/mdc-text-field";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  main.scss 2:9  root stylesheet
Error: Can't find stylesheet to import.

so when I change the line to the following, with the tilde operator

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

it finds the stylesheet to import, but the referenced stylesheet mdc-text-field, that is inside the nodes_modules, tries to load other stylesheets without the tilde operator, so I get an other error like this:

 Can't find stylesheet to import.
   ╷
23 │ @import "@material/animation/variables";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\@material\textfield\mdc-text-field.scss 23:9  @import
  main.scss 2:9                                              root stylesheet
Error: Can't find stylesheet to import.

So how can I fix this problem?

user3517228
  • 371
  • 1
  • 3
  • 4

1 Answers1

2

Create a .sassrc.js file and add the following lines.

const path = require('path')
const CWD = process.cwd()

module.exports = {
  "includePaths": [
    path.resolve(CWD, 'node_modules')    
  ]
}

You can refer this

I hope this answer helps.

SKJ
  • 91
  • 1
  • 14
  • 1
    I find this to be one of the better solutions, but note that `"sass": { "includePaths": ["./node_modules"] }` can also be added to `package.json` if you don't want a separate `.sassrc.js` file. For more background, see the discussion at https://github.com/parcel-bundler/parcel/issues/1800 – danmichaelo May 14 '20 at 09:27