search

material-components / material-components-web-codelabs

Codelabs for Material Components for Web (MDC Web)
MIT License
130 stars 101 forks source link

[codelab] "Can't find stylesheet to import" error in ./home.scss #306

Open Harissa opened 3 years ago

Harissa commented 3 years ago

When I follow the instructions for this page. I get the build error: ERROR in ./home.scss Module build failed: undefined ^ Can't find stylesheet to import. ╷ 22 │ @use '@material/theme/theme-color'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\@material\list_variables.scss 22:1 @forward node_modules\@material\drawer\mdc-drawer.import.scss 12:1 @import stdin 2:9 root stylesheet in D:\current projects\Reciepts\MaterialTutorial\mdc-102\starter\node_modules\@material\list_variables.scss (line 22, column 1) @ multi (webpack)-dev-server/client?http://localhost:8080 ./home.scss

This only appears in the "starter" folder and not the "complete" folder. From what I can see the error seems to be because the starter project requires me to install the @material/list package whereas the complete project already has it installed. The complete project uses list package version 6 which works without errors, however the latest version of the list package is version 12 which creates the error shown. In the short term, it would be good to have a work around because this means I can't go any further with the tutorial. This is the third npm package error that I've had with the tutorial so far, but I managed to solve the others. So in the longer term I would suggest you consider moving away from the npm type solutions as they create this type of dependency hell.

eris8x6 commented 3 years ago

I had this problem, too. The solution is in issue #232:

In the @import, change "@material/ripple/mixins" to "@material/ripple/mdc-ripple"

Harissa commented 3 years ago

Excellent! Thanks very much @eris8x6 that's the best kind of comment, the type which contains a fix. Much appreciated I'll give it go and see how I get on.