question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[mdc-top-app-bar] Including core-styles does not work

See original GitHub issue

Bug report

When I @use top-app-bar, it fails and can’t find the mixin core-styles.

Actual behavior

Webpack throws an error: ‘Undefined mixin’.

Expected behavior

Webpack should compile the source files.

Screenshots

https://cdn.discordapp.com/attachments/278684671179489281/700760884078706798/unknown.png

Your Environment:

Software Version(s)
MDC Web 5.1.0
Browser Chrome
Operating System Windows 10 Pro

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:1
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
asyncLizcommented, Jul 9, 2020

It doesn’t mean anything, core-styles and the mdc-* import are the exact same thing, just a different way of including the CSS. One is a side-effect import and the other is more explicit.

The downside to the mdc-* import is that you need to remember to include another import if you want to use mixins. That (plus avoiding side-effects and preferring explicit style generation) is the reason we’re moving to the core-styles pattern.

@use '@material/top-app-bar/mdc-top-app-bar';
@use '@material/top-app-bar';

.mdc-top-app-bar {
  @include top-app-bar.ink-color(blue);
}

Is exactly the same as

@use '@material/top-app-bar';

@include top-app-bar.core-styles;

.mdc-top-app-bar {
  @include top-app-bar.ink-color(blue);
}
0reactions
youbet1980commented, Jul 9, 2020

Ok so perhaps this will be done in the next few weeks? When you can’t @include top-app-bar.core-styles does this mean that all the sass mixins do not work or what does not being able to include core-styles effect?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Material Design tab-Indicator Mixin Undefined - Stack Overflow
There are a number of problems here: @use adds namespace to imported members, see @use docs. So you should prefix mixin with the...
Read more >
App bars: top - Material Design
Short top app bars are top app bars that can collapse to the navigation icon side when scrolled. ... Note: Short top app...
Read more >
@material/top-app-bar - npm
A regular top app bar can transform into a contextual action bar. ... @use "@material/top-app-bar/mdc-top-app-bar"; @include ...
Read more >
Custom Theme for Angular Material Components Series: Part 2
mat-core - This will render all core styles which are not theme-dependent. We are including this in our styles.scss directly, step 1️⃣ of...
Read more >
Has anyone tried using compose web with https github com mat ...
Has anyone tried using compose-web with mdc yet? jim. 05/23/2021, 3:00 PM. Not that I know of, but it should totally work. Let...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found