fix(material-experimental): errors with latest MDC canary version (#18173)

A few hours ago MDC switched all their Sass to use the new Sass modules (see material-components/material-components-web@faa9af3). This breaks our MDC components since they've been set up to use global Sass variables. These changes switch all the imports to the `.import` files which use the old approach for exposing variables.

(cherry picked from commit 1b16701)

Author: crisbeto

package.json

@@ -54,7 +54,7 @@
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",
-    "material-components-web": "5.0.0-canary.b602226ce.0",
+    "material-components-web": "5.0.0-canary.faa9af310.0",
     "rxjs": "^6.5.3",
     "systemjs": "0.19.43",
     "tslib": "^1.10.0",
@@ -127,7 +127,7 @@
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",
     "moment": "^2.18.1",
-    "node-sass": "^4.12.0",
+    "sass": "^1.24.4",
     "parse5": "^5.0.0",
     "protractor": "^5.4.2",
     "requirejs": "^2.3.6",

src/material-experimental/mdc-button/_mdc-button.scss

@@ -1,8 +1,8 @@
-@import '@material/button/mixins';
-@import '@material/button/variables';
-@import '@material/fab/mixins';
-@import '@material/ripple/mixins';
-@import '@material/icon-button/mixins';
+@import '@material/button/mixins.import';
+@import '@material/button/variables.import';
+@import '@material/fab/mixins.import';
+@import '@material/ripple/mixins.import';
+@import '@material/icon-button/mixins.import';
 @import '../../material/core/ripple/ripple';
 @import '../mdc-helpers/mdc-helpers';
 

src/material-experimental/mdc-button/button.scss

@@ -1,6 +1,6 @@
-@import '@material/button/mixins';
-@import '@material/button/variables';
-@import '@material/ripple/mixins';
+@import '@material/button/mixins.import';
+@import '@material/button/variables.import';
+@import '@material/ripple/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import '../../cdk/a11y/a11y';
 @import '_button-base';

src/material-experimental/mdc-button/fab.scss

@@ -1,6 +1,6 @@
-@import '@material/fab/mixins';
-@import '@material/button/variables';
-@import '@material/theme/variables';
+@import '@material/fab/mixins.import';
+@import '@material/button/variables.import';
+@import '@material/theme/variables.import';
 @import '../mdc-helpers/mdc-helpers';
 @import '_button-base';
 

src/material-experimental/mdc-button/icon-button.scss

@@ -1,4 +1,4 @@
-@import '@material/icon-button/mixins';
+@import '@material/icon-button/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import '_button-base';
 

src/material-experimental/mdc-card/_mdc-card.scss

@@ -1,5 +1,5 @@
-@import '@material/card/mixins';
-@import '@material/typography/mixins';
+@import '@material/card/mixins.import';
+@import '@material/typography/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @mixin mat-card-theme-mdc($theme) {

src/material-experimental/mdc-card/card.scss

@@ -1,4 +1,4 @@
-@import '@material/card/mixins';
+@import '@material/card/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 @import '../../cdk/a11y/a11y';
 

src/material-experimental/mdc-checkbox/_mdc-checkbox.scss

@@ -1,8 +1,8 @@
-@import '@material/checkbox/mixins';
-@import '@material/checkbox/variables';
-@import '@material/form-field/mixins';
-@import '@material/ripple/variables';
-@import '@material/theme/functions';
+@import '@material/checkbox/mixins.import';
+@import '@material/checkbox/variables.import';
+@import '@material/form-field/mixins.import';
+@import '@material/ripple/variables.import';
+@import '@material/theme/functions.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @mixin mat-checkbox-theme-mdc($theme) {

src/material-experimental/mdc-checkbox/checkbox.scss

@@ -1,7 +1,7 @@
-@import '@material/checkbox/functions';
-@import '@material/checkbox/mixins';
-@import '@material/form-field/mixins';
-@import '@material/ripple/variables';
+@import '@material/checkbox/functions.import';
+@import '@material/checkbox/mixins.import';
+@import '@material/form-field/mixins.import';
+@import '@material/ripple/variables.import';
 @import '../mdc-helpers/mdc-helpers';
 
 @include mdc-checkbox-without-ripple($query: $mat-base-styles-query);

src/material-experimental/mdc-chips/_mdc-chips.scss

@@ -1,6 +1,6 @@
-@import '@material/chips/mixins';
+@import '@material/chips/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
-@import '@material/theme/functions';
+@import '@material/theme/functions.import';
 
 @mixin mat-chips-theme-mdc($theme) {
   @include mdc-chip-set-core-styles($query: $mat-theme-styles-query);