Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Non-precompiled styles are broken in every example/demo #1261

Closed
Gaibhne opened this issue Sep 29, 2021 · 1 comment
Closed

Non-precompiled styles are broken in every example/demo #1261

Gaibhne opened this issue Sep 29, 2021 · 1 comment
Labels

Comments

@Gaibhne
Copy link

Gaibhne commented Sep 29, 2021

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.

@Gaibhne Gaibhne added the bug label Sep 29, 2021
@mlaursen
Copy link
Owner

mlaursen commented Oct 8, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants