No mixin named mdc-ripple-common error after adding @material/react-menu/index.scss
See original GitHub issueI recently added @material/react-menu
to my project, and imported the scss file into mine amongst others as per the README, like so:
@import "@material/react-menu/index.scss";
@import "@material/react-top-app-bar/index.scss";
@import "@material/react-material-icon/index.scss";
However, I get the following error:
@include mdc-ripple-common($query);
^
No mixin named mdc-ripple-common
in /Users/someone/gitrepos/myproject/my-ui/node_modules/@material/menu/_mixins.scss (line 35, column 12)
If I comment out the react-menu import:
// @import "@material/react-menu/index.scss";
then it all works, and icons have a ripple effect when I click them.
Is there something else I need to do to get these configured properly?
Contents of .env:
SASS_PATH=node_modules
Result of npm ls | grep material
:
βββ¬ @material/react-material-icon@0.13.0
β βββ¬ @material/react-ripple@0.13.0
β β βββ¬ @material/dom@1.1.0
β β βββ¬ @material/ripple@1.1.0
β β β βββ @material/animation@1.0.0 deduped
β β β βββ @material/base@1.0.0 deduped
β β β βββ @material/dom@1.1.0 deduped
β β β βββ @material/feature-targeting@0.44.1 deduped
β β β βββ @material/theme@1.1.0 deduped
βββ¬ @material/react-menu@0.13.0
β βββ¬ @material/menu@1.1.1
β β βββ¬ @material/base@1.0.0
β β βββ @material/feature-targeting@0.44.1
β β βββ¬ @material/list@1.1.1
β β β βββ @material/base@1.0.0 deduped
β β β βββ @material/dom@1.1.0 deduped
β β β βββ @material/feature-targeting@0.44.1 deduped
β β β βββ¬ @material/ripple@1.1.0
β β β β βββ @material/animation@1.0.0 deduped
β β β β βββ @material/base@1.0.0 deduped
β β β β βββ @material/dom@1.1.0 deduped
β β β β βββ @material/feature-targeting@0.44.1 deduped
β β β β βββ @material/theme@1.1.0 deduped
β β β βββ @material/rtl@0.42.0 deduped
β β β βββ @material/shape@1.1.1 deduped
β β β βββ @material/theme@1.1.0 deduped
β β β βββ @material/typography@1.0.0 deduped
β β βββ¬ @material/menu-surface@1.1.1
β β β βββ @material/animation@1.0.0 deduped
β β β βββ @material/base@1.0.0 deduped
β β β βββ @material/elevation@1.1.0 deduped
β β β βββ @material/feature-targeting@0.44.1 deduped
β β β βββ @material/rtl@0.42.0 deduped
β β β βββ @material/shape@1.1.1 deduped
β β β βββ @material/theme@1.1.0 deduped
β β βββ¬ @material/ripple@1.1.0
β β β βββ @material/animation@1.0.0 deduped
β β β βββ @material/base@1.0.0 deduped
β β β βββ @material/dom@1.1.0 deduped
β β β βββ @material/feature-targeting@0.44.1 deduped
β β β βββ @material/theme@1.1.0 deduped
β β βββ @material/rtl@0.42.0
β βββ¬ @material/react-list@0.13.0
β β βββ @material/dom@1.1.0 deduped
β β βββ @material/list@1.1.1 deduped
β β βββ¬ @material/react-checkbox@0.10.0
β β β βββ¬ @material/checkbox@0.41.0
β β β β βββ @material/animation@0.41.0
β β β β βββ @material/base@0.41.0
β β β β βββ¬ @material/ripple@0.41.0
β β β β β βββ @material/animation@0.41.0
β β β β β βββ @material/base@0.41.0
β β β β β βββ @material/theme@0.41.0
β β β β βββ @material/rtl@0.40.1
β β β β βββ¬ @material/selection-control@0.41.0
β β β β β βββ @material/ripple@0.41.0 deduped
β β β β βββ @material/theme@0.41.0
β β β βββ¬ @material/react-ripple@0.10.0
β β β β βββ @material/ripple@0.41.0 deduped
β β βββ¬ @material/react-radio@0.10.0
β β β βββ¬ @material/form-field@0.41.0
β β β β βββ @material/base@0.41.0
β β β β βββ @material/rtl@0.40.1
β β β β βββ @material/selection-control@0.41.0 deduped
β β β β βββ @material/theme@0.41.0
β β β β βββ @material/typography@0.41.0
β β β βββ¬ @material/radio@0.41.0
β β β β βββ @material/animation@0.41.0
β β β β βββ @material/base@0.41.0
β β β β βββ @material/ripple@0.41.0 deduped
β β β β βββ @material/selection-control@0.41.0 deduped
β β β β βββ @material/theme@0.41.0
β β β βββ¬ @material/react-ripple@0.10.0
β β β β βββ @material/ripple@0.41.0 deduped
β β βββ @material/react-ripple@0.13.0 deduped
β βββ¬ @material/react-menu-surface@0.13.0
β β βββ @material/menu-surface@1.1.1 deduped
βββ¬ @material/react-top-app-bar@0.13.0
β βββ @material/react-ripple@0.13.0 deduped
β βββ¬ @material/top-app-bar@1.1.1
β β βββ¬ @material/animation@1.0.0
β β βββ @material/base@1.0.0 deduped
β β βββ¬ @material/elevation@1.1.0
β β β βββ @material/animation@1.0.0 deduped
β β β βββ @material/feature-targeting@0.44.1 deduped
β β β βββ @material/theme@1.1.0 deduped
β β βββ¬ @material/ripple@1.1.0
β β β βββ @material/animation@1.0.0 deduped
β β β βββ @material/base@1.0.0 deduped
npmβ β β βββ @material/dom@1.1.0 deduped
β β β βββ @material/feature-targeting@0.44.1 deduped
β β β βββ @material/theme@1.1.0 deduped
β β βββ @material/rtl@0.42.0 deduped
β β βββ¬ @material/shape@1.1.1
β β β βββ @material/feature-targeting@0.44.1 deduped
β β βββ¬ @material/theme@1.1.0
β β β βββ @material/feature-targeting@0.44.1 deduped
β β βββ¬ @material/typography@1.0.0
β β β βββ @material/feature-targeting@0.44.1 deduped
Application was created by create-react-app and uses node-sass to watch and compile scss files.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:6 (2 by maintainers)
Top Results From Across the Web
import - Suppress "no mixin named ..." in sass
In my scss file use mixin from angular-material: @include input-placeholder-color(red);. and I get an error: Error: no mixin named ...
Read more >Sass @mixin and @include - W3Schools
A mixin is defined with the @mixin directive. Sass @mixin Syntax: @mixin name { property: value; property: value; ... }.
Read more >error: no mixin named focus-border office ui fabric react.Issue ...
The color that we add at the end is defined in another SCSS called _semanticSlots.scss; instead of importing the whole thing (and introduceΒ ......
Read more >Gulp error: no mixin named box-sizing in _scaffolding.scss
When running gulp I am getting this error: gulp-notify: [Gulp] Error: ... Gulp error: no mixin named box-sizing in _scaffolding.scss.
Read more >Error no mixin named - sage - Roots Discourse
Hey folks, I'm trying to use a mixin to create a linear gradient for background, I check sass doc and search online but...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
released a patch 0.13.2
@jonmanzo yes I also see that the @mateiral/ripple is resolving to 0.41.0.
checkbox
andradio
should be updated to 0.13.0, which should resolve this issue.