Unable to import sass files if react-md was installed with npm and React 16

[mlaursen]

Description

If react-md is installed with npm and React 16, the following error occurs when trying to compile sass files:

SassError: Can't find stylesheet to import.
  ╷
1 │ @use "@react-md/theme/dist/color-palette" as *;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/variables.scss 1:1  @use
  src/App.scss 1:1        root stylesheet

This occurs because for some reason the node_modules directory does not include all the scoped react-md packages at node_modules/@react-md/. The folder structure looks something like this:

node_modules
├── @react-md
│   └── utils
├── react-md
│   ├── node_modules
│   │   └── @react-md
│   │   │   ├── alert
│   │   │   ├── avatar
│   │   │   ├── # ...all other scoped packages...
│   │   │   ├── utils

All the scoped packages should be flattened to the root node_modules instead of the node_modules/react-md/node_modules folder for the sass imports to work.

Since this only occurs with React 16 as a dependency, I think it might be because I forgot to add the peerDependencies to the @react-md/utils's package.json file.

Workaround

• installing all the scoped packages along with the main react-md package will make the node_modules folder correctly flattened
• using React 17 instead of React 16
• using yarn? (untested)

[mlaursen]

With the changes in 60fcd71, there will no longer be a node_modules/@react-md folder and everything exists at node_modules/react-md/node_modules/@react-md.

The examples in this repo can be fixed by updating the _everything.scss to be this:

-@use '@react-md/theme/dist/color-palette' as *;
+@use 'react-md/node_modules/@react-md/theme/dist/color-palette' as *;
 @forward 'react-md' with (
   // update these variables as needed for your app
   $rmd-theme-primary: $rmd-purple-500,
   $rmd-theme-secondary: $rmd-pink-a-200,
   $rmd-theme-light: true,
   $rmd-theme-dark-class: 'prefers-color-scheme',
   $rmd-utils-auto-dense: false
 );

Since this is only reproducible using npm and react 16, I'm not going to spend more time trying to figure out how to fix this unless other users report this issue or comment here.