Using pnpm: Error: Can't find stylesheet to import: `@use '@material/theme/color-palette';` #348

derolf · 2021-10-21T09:23:53Z

I am using svelteKit and I am trying to integrate with SMUI.

** problem **

I am getting an error when trying to compile the theme:


> smui-theme compile static/smui.css -i src/theme

Compiling SMUI Styles...
/XXX/node_modules/yargs/build/index.cjs:2772
                throw err;
                ^

Error: Can't find stylesheet to import.
  ╷
3 │ @use '@material/theme/color-palette';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/theme/_smui-theme.scss 3:1                                                            @use
  ../../node_modules/.pnpm/[email protected]/node_modules/smui-theme/_index.scss 1:1  root stylesheet
    at Object._newRenderError

My postcss.config.cjs:

/* eslint-disable no-undef */
/* eslint-disable @typescript-eslint/no-var-requires */

const autoprefixer = require("autoprefixer");

module.exports = {
  extract: true,
  minimize: true,
  plugins: [
    autoprefixer,
  ],
  use: [
    [
      "sass",
      {
        includePaths: [join(__dirname, "src/theme"), join(__dirname, "node_modules")],
      },
    ],
  ],
};

** cause ***

I think the problem is with using PNPM as package manager, this fails:

path.dirname(require.resolve('@material/dom/package.json')),

Because of PNPMs linking style, this resolves to

/XXX/node_modules/.pnpm/@[email protected]/node_modules

** workaround **

Package.json:

    "smui-theme-light": "smui-theme compile static/smui.css -i src/theme -i ./node_modules",
    "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark -i ./node_modules"

I get past the error, but I have to install all @material/ packages by hand.

The text was updated successfully, but these errors were encountered:

Hubro · 2021-11-08T23:48:50Z

I'm getting more or less the same error, and I'm using vanilla npm.

Error: Can't find stylesheet to import.
  ╷
1 │ @use '@material/button/styles';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  /my-project-path/node_modules/@smui/button/_style.scss 1:1  @use
  /my-project-path/node_modules/smui-theme/_style.scss 3:1    @use
  /my-project-path/node_modules/smui-theme/_index.scss 2:1    root stylesheet

The reason of the error seems to be that @smui/button has its dependencies installed under its own module directory, and the compiler isn't searching there.

$ ls node_modules/@material
dom   theme

$ ls node_modules/@smui/button/node_modules/@material
animation  base  button  density  dom  elevation  feature-targeting  ripple  rtl  shape  theme  touch-target  typography

So it seems like it's supposed to resolve this file correctly. How come it doesn't? Is there anything I can do to make this work properly, rather than having to install every dependency at the top level?

bugproof · 2021-11-20T15:00:29Z

This is very off-putting indeed. I even added @material/theme manually hoping that it was missing a dependency but it still can't find the stylesheet to import (@use '@material/theme/color-palette';). I think this library is just completely broken at the moment. The official example doesn't even run https://github.com/hperrin/smui-example-sveltekit

derolf · 2021-11-22T20:58:24Z

I know it’s destructive, but my solution was to drop smui and directly use the material web components and css classes

bogacg · 2022-01-08T10:25:24Z

I did get errors previously but with "6.0.0-beta.13" when installation instructions are followed it works.

Things that may not be intuitive or be missed glancing docs thinking they are just details:

Add one of the SMUI packages, like "@smui/button" for example, otherwise none of the Material common packages is installed, which causes an error.
Add prepare npm script last, otherwise it tries to execute it before installing required packages and execution of smui-theme cli command.
Add "@material/theme" & @material/typography" packages if you are customizing stuff.
If you make an error in referencing theme file(s) it throws an error.
- For example referencing theme file (_smui-theme.scss) inside app.scss when it should be other way around is an error.

Example project is a good starting point next to docs.

vhscom · 2022-01-12T11:40:59Z

Example project is a good starting point next to docs.

True. It is a good point of reference. And it works with npm. But it also does not work with pnpm. When pnpm is used the same issue the OP had occurs during install.

OrangeUtan · 2022-01-23T11:01:17Z

I can report the same thing. pnpm just doesnt seem to work out of box. I tested the same setup as in the example project plus smui-card, npm succeds, pnpm fails. It only works after installing @matial/ packages manualy:

pnpm i -D @material/animation @material/base @material/card @material/dom @material/elevation @material/ripple @material/rtl @material/shape

valeneiko · 2022-02-20T00:47:26Z

Installing @material/* manually can be avoided by adding public-hoist-pattern[]=@material/* to .npmrc, but this is still a workaround. (and you still need to explicitly add node_modules folder to include paths: -i ./node_modules)

The real fix is to somehow find all installed @smui packages and add their @material/* dependencies to the include paths here: packages/smui-theme/bin/index.js#L60-L63

siawyoung · 2022-03-15T15:16:00Z

I didn't really have the mental bandwidth to grok any of the above suggested fixes (I tried manually installing all the dependencies but it didn't work for me), so I just went back to NPM. I think this is probably the easiest and best workaround for now.

kuchaguangjie · 2022-06-10T01:11:39Z

I am using svelteKit and I am trying to integrate with SMUI.

** problem **

I am getting an error when trying to compile the theme:
> smui-theme compile static/smui.css -i src/theme

Compiling SMUI Styles...
/XXX/node_modules/yargs/build/index.cjs:2772
                throw err;
                ^

Error: Can't find stylesheet to import.
  ╷
3 │ @use '@material/theme/color-palette';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/theme/_smui-theme.scss 3:1                                                            @use
  ../../node_modules/.pnpm/[email protected]/node_modules/smui-theme/_index.scss 1:1  root stylesheet
    at Object._newRenderError 
My postcss.config.cjs:
/* eslint-disable no-undef */
/* eslint-disable @typescript-eslint/no-var-requires */

const autoprefixer = require("autoprefixer");

module.exports = {
  extract: true,
  minimize: true,
  plugins: [
    autoprefixer,
  ],
  use: [
    [
      "sass",
      {
        includePaths: [join(__dirname, "src/theme"), join(__dirname, "node_modules")],
      },
    ],
  ],
};
** cause ***

I think the problem is with using PNPM as package manager, this fails:

path.dirname(require.resolve('@material/dom/package.json')),

Because of PNPMs linking style, this resolves to

/XXX/node_modules/.pnpm/@[email protected]/node_modules

** workaround **

Package.json:
    "smui-theme-light": "smui-theme compile static/smui.css -i src/theme -i ./node_modules",
    "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark -i ./node_modules"
I get past the error, but I have to install all @material/ packages by hand.

and here is the list of command to install @Material packages, in my test:

pnpm add -D @material/theme
pnpm add -D @material/button
pnpm add -D @material/rtl
pnpm add -D @material/touch-target
pnpm add -D @material/typography
pnpm add -D @material/elevation
pnpm add -D @material/animation
pnpm add -D @material/ripple
pnpm add -D @material/focus-ring
pnpm add -D @material/density
pnpm add -D @material/shape
pnpm add -D @material/tokens
pnpm add -D @material/dialog
pnpm add -D @material/icon-button

V-ed · 2022-08-05T13:53:59Z

I am copy pasting what @valeneiko wrote few comments up just to give a bit more visibility because some people seem to not read comments without big bold "workaround for pnpm" written in it.

Current Workaround for PNPM

Installing @material/* manually can be avoided by adding public-hoist-pattern[]=@material/* to .npmrc, but this is still a workaround. (and you still need to explicitly add node_modules folder to include paths: -i ./node_modules)

In other words, there is two steps you need to do to fix this issue until a proper fix is made in smui-theme :

1 : In your `package.json` file

Change your scripts like this :

-  "smui-theme-light": "smui-theme compile static/smui.css -i src/theme",
-  "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark"
+  "smui-theme-light": "smui-theme compile static/smui.css -i src/theme -i ./node_modules",
+  "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark -i ./node_modules"

In my case, since in am in a monorepo (<root>/client), I had to change it like this to get to the root node_modules, notice the path for node_modules has two dots (../) :

-  "smui-theme-light": "smui-theme compile static/smui.css -i src/theme",
-  "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark"
+  "smui-theme-light": "smui-theme compile static/smui.css -i src/theme -i ../node_modules",
+  "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark -i ../node_modules"

2 : In your root `.npmrc` file

If your don't have a root .npmrc file, create one first.

Add this :

public-hoist-pattern[]=@material/*

3 : Install your packages again

The usual pnpm i or whatever you use to install your packages with pnpm will now install all material packages in your root node_modules, which makes them available to smui-theme and prevents the errors shown here.

Again, nothing original here, this is a straight up copy paste from @valeneiko's comment, just formatted to be visible because some people are still missing it. Thanks @valeneiko for the current workaround, hope a fix is implemented in the main repo eventually so this workaround becomes obsolete!

erezarnon · 2023-01-14T03:45:54Z

Getting the same error with yarn

make-me-a-websiteDOTnet · 2023-02-07T08:42:37Z

I am copy pasting what @valeneiko wrote few comments up just to give a bit more visibility because some people seem to not read comments without big bold "workaround for pnpm" written in it.

Current Workaround for PNPM

Installing @material/* manually can be avoided by adding public-hoist-pattern[]=@material/* to .npmrc, but this is still a workaround. (and you still need to explicitly add node_modules folder to include paths: -i ./node_modules)

In other words, there is two steps you need to do to fix this issue until a proper fix is made in smui-theme :

1 : In your package.json file

Change your scripts like this :
-  "smui-theme-light": "smui-theme compile static/smui.css -i src/theme",
-  "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark"
+  "smui-theme-light": "smui-theme compile static/smui.css -i src/theme -i ./node_modules",
+  "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark -i ./node_modules"
In my case, since in am in a monorepo (<root>/client), I had to change it like this to get to the root node_modules, notice the path for node_modules has two dots (../) :
-  "smui-theme-light": "smui-theme compile static/smui.css -i src/theme",
-  "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark"
+  "smui-theme-light": "smui-theme compile static/smui.css -i src/theme -i ../node_modules",
+  "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark -i ../node_modules"
2 : In your root .npmrc file

If your don't have a root .npmrc file, create one first.

Add this :
public-hoist-pattern[]=@material/*
3 : Install your packages again

The usual pnpm i or whatever you use to install your packages with pnpm will now install all material packages in your root node_modules, which makes them available to smui-theme and prevents the errors shown here.

Again, nothing original here, this is a straight up copy paste from @valeneiko's comment, just formatted to be visible because some people are still missing it. Thanks @valeneiko for the current workaround, hope a fix is implemented in the main repo eventually so this workaround becomes obsolete!

For some reason, pnpm i did not rid me of the error, I've hade to delete my pnpm-lock.yaml and node_modules before installing and finally getting rid of the error, but thanks a lot, detailed post like this are very helpful for newcomers like me!

idamachmadfaizin · 2023-02-20T10:23:39Z

I am using svelteKit and I am trying to integrate with SMUI.
** problem **
I am getting an error when trying to compile the theme:
> smui-theme compile static/smui.css -i src/theme

Compiling SMUI Styles...
/XXX/node_modules/yargs/build/index.cjs:2772
                throw err;
                ^

Error: Can't find stylesheet to import.
  ╷
3 │ @use '@material/theme/color-palette';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/theme/_smui-theme.scss 3:1                                                            @use
  ../../node_modules/.pnpm/[email protected]/node_modules/smui-theme/_index.scss 1:1  root stylesheet
    at Object._newRenderError 
My postcss.config.cjs:
/* eslint-disable no-undef */
/* eslint-disable @typescript-eslint/no-var-requires */

const autoprefixer = require("autoprefixer");

module.exports = {
  extract: true,
  minimize: true,
  plugins: [
    autoprefixer,
  ],
  use: [
    [
      "sass",
      {
        includePaths: [join(__dirname, "src/theme"), join(__dirname, "node_modules")],
      },
    ],
  ],
};
** cause ***
I think the problem is with using PNPM as package manager, this fails:
path.dirname(require.resolve('@material/dom/package.json')),
Because of PNPMs linking style, this resolves to
/XXX/node_modules/.pnpm/@[email protected]/node_modules
** workaround **
Package.json:
    "smui-theme-light": "smui-theme compile static/smui.css -i src/theme -i ./node_modules",
    "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark -i ./node_modules"
I get past the error, but I have to install all @material/ packages by hand.

and here is the list of command to install @Material packages, in my test:

pnpm add -D @material/theme
pnpm add -D @material/button
pnpm add -D @material/rtl
pnpm add -D @material/touch-target
pnpm add -D @material/typography
pnpm add -D @material/elevation
pnpm add -D @material/animation
pnpm add -D @material/ripple
pnpm add -D @material/focus-ring
pnpm add -D @material/density
pnpm add -D @material/shape
pnpm add -D @material/tokens
pnpm add -D @material/dialog
pnpm add -D @material/icon-button

this is the update of command to install @Material packages, of course in my test.

pnpm i -D @material/animation @material/base @material/button @material/density @material/dialog @material/drawer @material/elevation @material/focus-ring @material/icon-button @material/list @material/ripple @material/rtl @material/shape @material/theme @material/tokens @material/top-app-bar @material/touch-target @material/typography

V-ed · 2023-02-20T14:04:46Z

this is the update of command to install @Material packages, of course in my test.

pnpm i -D @material/animation @material/base @material/button @material/density @material/dialog @material/drawer @material/elevation @material/focus-ring @material/icon-button @material/list @material/ripple @material/rtl @material/shape @material/theme @material/tokens @material/top-app-bar @material/touch-target @material/typography

Just pointing out in case someone opens this issue and scrolls all the way down here, installing all material packages can be avoided by using the workaround provided above.

Obviously, installing all material packages would still work (with the command tweak too) but might be a hassle and result in a heavier package.json file, but to each their own. :)

hkwi · 2023-08-07T08:27:26Z

With pnpm install, following worked for me.

smui-theme compile static/smui.css -i src/theme -i node_modules/.pnpm/node_modules

Because pnpm install --help shows

      --hoist-pattern <pattern>         Hoist all dependencies matching the pattern to
                                        `node_modules/.pnpm/node_modules`. The default pattern is * and matches
                                        everything. Hoisted packages can be required by any dependencies, so it is an
                                        emulation of a flat node_modules

JeremyEastham · 2023-08-11T18:54:56Z

I tried all of the solutions mentioned here without success. Using the public-hoist-pattern made my styles compile, but some of the styles were not included in the bundle. What finally worked for me is setting shamefully-hoist=true in .npmrc. This makes pnpm hoist every package to node_modules, closely emulating the behavior of npm. This is a nuclear option, but it should be more resistant to package updates. I am not sure if there are any negative consequences to doing this, but the packages are still symlinked by default so that they don't consume more disk space.

https://pnpm.io/npmrc#shamefully-hoist

By default, pnpm creates a semistrict node_modules, meaning dependencies have access to undeclared dependencies but modules outside of node_modules do not. With this layout, most of the packages in the ecosystem work with no issues. However, if some tooling only works when the hoisted dependencies are in the root of node_modules, you can set this to true to hoist them for you.

package.json

-  "smui-theme-light": "smui-theme compile static/smui.css -i src/theme",
-  "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark"
+  "smui-theme-light": "smui-theme compile static/smui.css -i src/theme -i node_modules",
+  "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark -i node_modules"

.npmrc

- public-hoist-pattern[]=@material/*
+ shamefully-hoist=true

Delete node_modules and run pnpm install to make sure that the packages are hoisted properly.

With this solution, there is no need to install individual material components (@material/button, @material/tab-bar, @material/paper, etc). You still must install the SMUI components (@smui/button, @smui/tab-bar, @smui/paper, etc). You must also install any "extra" material packages that you are using in your stylesheets (@material/theme, @material/typography, @material/shape, etc).

close #4 ## What are we doing with this PR?  Add [Svelte Material UI](https://sveltematerialui.com/) to the project as the main component library. Migrate the dummy auth UI from #7 to the new Material framework. ## Screenshots  ![smui-auth-1](https://github.com/user-attachments/assets/bc3d8d2a-9d07-47cd-8c5f-3a5bb5f53bd2) ![smui-auth-2](https://github.com/user-attachments/assets/bbc33dda-3fa2-4597-a98e-e5e6b1ce90bc) ## Notes to Reviewers  > [!WARNING] > **Don't forget to `pnpm install`** ## Additional Information > [!IMPORTANT] > While the styles are already compiled inside `static/smui.css`, when you add a new SMUI component (i.e. doing `pnpm i -D @smui/button`) _**you must run `pnpm run prepare`**_ to re-compile the `src/theme/_smui-theme.scss` file. [source](https://sveltematerialui.com/SVELTEKIT.md) An issue [similar to this](hperrin/svelte-material-ui#348) was faced, it was fixed by this [following this comment's](hperrin/svelte-material-ui#348 (comment)) procedures. I was not able to replicate the error/success color for the status text whilst adhering to the theme, due to inability to access the theme colors inside the scripts. Hope this does not come up again in the future.

derolf added the bug Something isn't working label Oct 21, 2021

stuft2 mentioned this issue Nov 12, 2021

@material/theme as a dependency? #322

Open

nickray mentioned this issue Feb 13, 2022

PNPM support #410

Closed

JinIgarashi mentioned this issue Sep 30, 2022

feat: migrated to pnpm UNDP-Data/geohub#634

Merged

tuckergordon mentioned this issue Feb 7, 2023

Doesnt work with PNPM hperrin/smui-example-sveltekit#17

Open

AxeloLabs mentioned this issue Jul 1, 2023

'EXPRESSION PRODUCES A UNION TYPE THAT IS TOO COMPLEX TO REPRESENT' #611

Open

Utkub24 mentioned this issue Dec 10, 2024

Add Svelte Material UI witch-puzzles/frontend-puzzles#8

Merged

hperrin pinned this issue Feb 5, 2025

hperrin changed the title ~~Error: Can't find stylesheet to import: @use '@material/theme/color-palette';~~ Using pnpm: Error: Can't find stylesheet to import: @use '@material/theme/color-palette'; Feb 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using pnpm: Error: Can't find stylesheet to import: `@use '@material/theme/color-palette';` #348

Using pnpm: Error: Can't find stylesheet to import: `@use '@material/theme/color-palette';` #348

derolf commented Oct 21, 2021 •

edited

Loading

Hubro commented Nov 8, 2021

bugproof commented Nov 20, 2021 •

edited

Loading

derolf commented Nov 22, 2021

bogacg commented Jan 8, 2022 •

edited

Loading

vhscom commented Jan 12, 2022

OrangeUtan commented Jan 23, 2022

valeneiko commented Feb 20, 2022

siawyoung commented Mar 15, 2022

kuchaguangjie commented Jun 10, 2022 •

edited

Loading

V-ed commented Aug 5, 2022

erezarnon commented Jan 14, 2023

make-me-a-websiteDOTnet commented Feb 7, 2023 •

edited

Loading

Current Workaround for PNPM

1 : In your `package.json` file

2 : In your root `.npmrc` file

3 : Install your packages again

idamachmadfaizin commented Feb 20, 2023

V-ed commented Feb 20, 2023

hkwi commented Aug 7, 2023

JeremyEastham commented Aug 11, 2023

Using pnpm: Error: Can't find stylesheet to import: @use '@material/theme/color-palette'; #348

Using pnpm: Error: Can't find stylesheet to import: @use '@material/theme/color-palette'; #348

Comments

derolf commented Oct 21, 2021 • edited Loading

Hubro commented Nov 8, 2021

bugproof commented Nov 20, 2021 • edited Loading

derolf commented Nov 22, 2021

bogacg commented Jan 8, 2022 • edited Loading

vhscom commented Jan 12, 2022

OrangeUtan commented Jan 23, 2022

valeneiko commented Feb 20, 2022

siawyoung commented Mar 15, 2022

kuchaguangjie commented Jun 10, 2022 • edited Loading

V-ed commented Aug 5, 2022

Current Workaround for PNPM

1 : In your package.json file

2 : In your root .npmrc file

3 : Install your packages again

erezarnon commented Jan 14, 2023

make-me-a-websiteDOTnet commented Feb 7, 2023 • edited Loading

Current Workaround for PNPM

1 : In your package.json file

2 : In your root .npmrc file

3 : Install your packages again

idamachmadfaizin commented Feb 20, 2023

V-ed commented Feb 20, 2023

hkwi commented Aug 7, 2023

JeremyEastham commented Aug 11, 2023

Using pnpm: Error: Can't find stylesheet to import: `@use '@material/theme/color-palette';` #348

Using pnpm: Error: Can't find stylesheet to import: `@use '@material/theme/color-palette';` #348

derolf commented Oct 21, 2021 •

edited

Loading

bugproof commented Nov 20, 2021 •

edited

Loading

bogacg commented Jan 8, 2022 •

edited

Loading

kuchaguangjie commented Jun 10, 2022 •

edited

Loading

1 : In your `package.json` file

2 : In your root `.npmrc` file

make-me-a-websiteDOTnet commented Feb 7, 2023 •

edited

Loading

1 : In your `package.json` file

2 : In your root `.npmrc` file