Material-components-web: MDCLinearProgress: bar-color and buffer-color mixins fail to build

[rolanday]

Code snippet as follows:

@use "@material/linear-progress/mdc-linear-progress";

.mdc-linear-progress {
  @include linear-progress.bar-color(blue);
}

Results in:

    ERROR in ./src/frontend/styles/main.scss (./node_modules/css-loader/dist/cjs.js??ref--4-1!./node_modules/postcss-loader/src??ref--4-2!./node_modules/resolve-url-loader??ref--4-3!./node_modules/sass-loader/dist/cjs.js??ref--4-4!./src/frontend/styles/main.scss)
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    SassError: There is no module with the namespace "linear-progress".
       ╷
    57 │   @include linear-progress.bar-color(blue);
       │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
       ╵

No issues with applying mixins to other MDC components and issue appears to be specific to linear progress.

[asyncLiz]

Looks like the documentation hasn't been updated to reflect the core-styles pattern. Try changing your code to this:

@use "@material/linear-progress";

@include linear-progress.core-styles;

.mdc-linear-progress {
  @include linear-progress.bar-color(blue);
}

[rolanday]

Looks like the documentation hasn't been updated to reflect the core-styles pattern. Try changing your code to this:

@use "@material/linear-progress";

@include linear-progress.core-styles;

.mdc-linear-progress {
  @include linear-progress.bar-color(blue);
}

Thank you :-) Did the trick.