mlaursen/react-md

Non-precompiled styles are broken in every example/demo

Gaibhne opened this issue · 1 comments

Most of the packages have demo projects on codesandbox.io. All of those examples that I looked at have the same basic setup, suggesting:

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

Example (of an example): https://codesandbox.io/s/gzvr3

Making exactly those two changes (removing the <link> tag and uncommenting the import statement) results in a broken sandbox displaying the following errors:

Could not resolve react-md: Could not resolve react-md
  ╷
2 │ ┌ @forward "react-md" with (
3 │ │   $rmd-theme-light: true,
4 │ │   $rmd-theme-primary: $rmd-teal-500,
5 │ │   $rmd-theme-secondary: $rmd-pink-a-200,
6 │ │ );
  │ └─^
  ╵
  src/_everything.scss 2:1  @use
  stdin 1:1                 root stylesheet

I have forked the above example and made the changes, I hope the link is publicly readable:

https://codesandbox.io/s/badge-example-simple-examples-forked-vy0ex?file=/public/index.html

I think all the details about setup, resolutions, devices and so on is not relevant to this bug, but if I should provide any additional info, let me know.

Darn. It looks like something changed with sass and/or sass-loader in codesandbox since it's no longer using the sass resolution in the package.json.

A small workaround for now would be to apply this patch:

 @use "@react-md/theme/dist/color-palette" as *;
-@forward "react-md" with (
+@forward "react-md/dist/everything" with (
   $rmd-theme-light: true,
   $rmd-theme-primary: $rmd-teal-500,
   $rmd-theme-secondary: $rmd-pink-a-200,
 );

Example codesandbox: https://codesandbox.io/s/badge-example-simple-examples-forked-hoc9x?file=/src/_everything.scss