CODEWITHSUNDEEP
sassnode-modulesparceljsmdc-components
user3517228
user3517228

Reputation: 461

Parcel + SASS: Import from node_modules without tilde operator? Or is it something else?

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?

Upvotes: 4

Views: 1981

Answers (1)

SKJ
SKJ

Reputation: 91

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.

Upvotes: 2

Related Questions