feat: Use @use syntax in material-components-web Sass file and… (#5573)

Author: abhiomkar

packages/material-components-web/index.scss

@@ -0,0 +1 @@
+@use './material-components-web';

packages/material-components-web/material-components-web.scss

@@ -20,37 +20,37 @@
 // THE SOFTWARE.
 //
 
-@import "@material/button/mdc-button";
-@import "@material/card/mdc-card";
-@import "@material/checkbox/mdc-checkbox";
-@import "@material/chips/mdc-chips";
-@import "@material/data-table/mdc-data-table";
-@import "@material/dialog/mdc-dialog";
-@import "@material/drawer/mdc-drawer";
-@import "@material/elevation/mdc-elevation";
-@import "@material/fab/mdc-fab";
-@import "@material/floating-label/mdc-floating-label";
-@import "@material/form-field/mdc-form-field";
-@import "@material/icon-button/mdc-icon-button";
-@import "@material/image-list/mdc-image-list";
-@import "@material/layout-grid/mdc-layout-grid";
-@import "@material/line-ripple/mdc-line-ripple";
-@import "@material/linear-progress/mdc-linear-progress";
-@import "@material/list/mdc-list";
-@import "@material/menu/mdc-menu";
-@import "@material/menu-surface/mdc-menu-surface";
-@import "@material/notched-outline/mdc-notched-outline";
-@import "@material/radio/mdc-radio";
-@import "@material/ripple/mdc-ripple";
-@import "@material/select/mdc-select";
-@import "@material/slider/mdc-slider";
-@import "@material/snackbar/mdc-snackbar";
-@import "@material/switch/mdc-switch";
-@import "@material/tab/mdc-tab";
-@import "@material/tab-bar/mdc-tab-bar";
-@import "@material/tab-indicator/mdc-tab-indicator";
-@import "@material/tab-scroller/mdc-tab-scroller";
-@import "@material/textfield/mdc-text-field";
-@import "@material/theme/mdc-theme";
-@import "@material/top-app-bar/mdc-top-app-bar";
-@import "@material/typography/mdc-typography";
+@use "@material/button/mdc-button";
+@use "@material/card/mdc-card";
+@use "@material/checkbox/mdc-checkbox";
+@use "@material/chips/mdc-chips";
+@use "@material/data-table/mdc-data-table";
+@use "@material/dialog/mdc-dialog";
+@use "@material/drawer/mdc-drawer";
+@use "@material/elevation/mdc-elevation";
+@use "@material/fab/mdc-fab";
+@use "@material/floating-label/mdc-floating-label";
+@use "@material/form-field/mdc-form-field";
+@use "@material/icon-button/mdc-icon-button";
+@use "@material/image-list/mdc-image-list";
+@use "@material/layout-grid/mdc-layout-grid"; // COPYBARA_COMMENT_THIS_LINE
+@use "@material/line-ripple/mdc-line-ripple";
+@use "@material/linear-progress/mdc-linear-progress";
+@use "@material/list/mdc-list";
+@use "@material/menu/mdc-menu";
+@use "@material/menu-surface/mdc-menu-surface";
+@use "@material/notched-outline/mdc-notched-outline";
+@use "@material/radio/mdc-radio";
+@use "@material/ripple/mdc-ripple";
+@use "@material/select/mdc-select";
+@use "@material/slider/mdc-slider";
+@use "@material/snackbar/mdc-snackbar";
+@use "@material/switch/mdc-switch";
+@use "@material/tab/mdc-tab";
+@use "@material/tab-bar/mdc-tab-bar";
+@use "@material/tab-indicator/mdc-tab-indicator";
+@use "@material/tab-scroller/mdc-tab-scroller";
+@use "@material/textfield/mdc-text-field";
+@use "@material/theme/mdc-theme";
+@use "@material/top-app-bar/mdc-top-app-bar";
+@use "@material/typography/mdc-typography";