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