[tab][tab-bar] undefined function variables.prop-value

Bug report

When I try to use either just the tab module, or the whole tab-bar module (including scroller and indicator), dart-sass throws the following error:

Error in plugin "sass"
Message:
    node_modules/@material/tab/_variables.scss
Error: Undefined function.
   ╷
31 │ $text-label-color-default: rgba(variables.prop-value(on-surface), $text-label-opacity) !default;
   │                                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@material/tab/_variables.scss 31:33       @use
  node_modules/@material/tab/_mixins.scss 30:1           @use
  node_modules/@material/tab-scroller/_mixins.scss 24:1  @use
  node_modules/@material/tab-bar/_mixins.scss 27:1       @use
  node_modules/@material/tab-bar/mdc-tab-bar.scss 24:1   @use
  frontend/src/scss/main.scss 19:1                       root stylesheet

Steps to reproduce

1. Install tab or tab-bar according to instructions
2. Include mdc-tab in your SCSS
3. Run the dart-sass compiler on that SCSS file.
4. See error

Actual behavior

I get an error when I compile.

Expected behavior

I don’t get an error when I compile.

Screenshots

Your Environment:

Here are our dependencies and version:

  "devDependencies": {
    "@babel/core": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@material/button": "^4.0.0",
    "@material/layout-grid": "^4.0.0",
    "@material/menu": "^4.0.0",
    "@material/select": "^4.0.0",
    "@material/tab": "^5.0.0",
    "@material/tab-bar": "^5.0.0",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-cli": "^2.2.0",
    "gulp-concat": "^2.6.1",
    "gulp-dart-sass": "^0.9.1",
    "gulp-livereload": "^4.0.2",
    "gulp-rename": "^2.0.0",
    "gulp-rev": "^9.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify-es": "^2.0.0",
    "gulp-uglifycss": "^1.1.0",
    "gulp-webpack": "^1.5.0",
    "install": "^0.13.0",
    "normalize.css": "^8.0.1",
    "npm": "^6.14.0",
    "sass": "^1.26.0",
    "sass-loader": "^8.0.2",
    "webpack-cli": "^3.3.11",
    "webpack": "^4.41.5"

  },

I import the component like so:

@use "@material/tab-bar/mdc-tab-bar";
@use "@material/tab-scroller/mdc-tab-scroller";
@use "@material/tab-indicator/mdc-tab-indicator";
@use "@material/tab/mdc-tab";

Software	Version(s)
Operating System	Ubuntu 18.04

[komali2]

Version mis-match is correct. Thank you.

Changing all versions to 4.0 fixed this for me.

[asyncLiz]

Can you upload a repository with a build step showing the error? I tried running sass on a file importing the dependencies as you described and it built just fine.

Additionally, try ensuring that all of your @material/* dependencies are on the same version. I see a mix of v4 and v5 in your package list.