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

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.

did you ever figure it out? I have the same issue. – Will May 01 '20 at 11:16 — Will, May 01 '20 at 11:16
no, unfortunately I still have the same issue – Leff May 01 '20 at 11:39 — Leff, May 01 '20 at 11:39

score 1 · Answer 1 · answered Oct 19 '20 at 14:58

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.

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

1 Answers1