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

Question

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

Opened this issue 3 years ago · 16 comments

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/smui-theme@5.0.0-beta.7/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/@material+dom@13.0.0/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.

Answer 1 · 2021-11-08T23:48:50.000Z

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?

Answer 2 · 2021-11-20T15:00:29.000Z

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

Answer 3 · 2021-11-22T20:58:24.000Z

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

Answer 4 · 2022-01-08T10:25:24.000Z

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.

Answer 5 · 2022-01-12T11:40:59.000Z

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.

Answer 6 · 2022-01-23T11:01:17.000Z

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

Answer 7 · 2022-02-20T00:47:26.000Z

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

Answer 8 · 2022-03-15T15:16:00.000Z

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.

Answer 9 · 2022-06-10T01:11:39.000Z

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/smui-theme@5.0.0-beta.7/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/@material+dom@13.0.0/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

Answer 10 · 2022-08-05T13:53:59.000Z

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!

Answer 11 · 2023-01-14T03:45:54.000Z

Getting the same error with yarn

Answer 12 · 2023-02-07T08:42:37.000Z

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!

Answer 13 · 2023-02-20T10:23:39.000Z

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/smui-theme@5.0.0-beta.7/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/@material+dom@13.0.0/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

Answer 14 · 2023-02-20T14:04:46.000Z

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. :)

Answer 15 · 2023-08-07T08:27:26.000Z

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

Answer 16 · 2023-08-11T18:54:56.000Z

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).

Current Workaround for PNPM

1 : In your package.json file

2 : In your root .npmrc file

3 : Install your packages again

Current Workaround for PNPM

1 : In your package.json file

2 : In your root .npmrc file

3 : Install your packages again

1 : In your `package.json` file

2 : In your root `.npmrc` file

1 : In your `package.json` file

2 : In your root `.npmrc` file