docs: Update getting started doc to use Sass module syntax (#5568)

copybara-service[bot] · abhiomkar · web-flow · commit b3df0231bb78 · 2020-02-07T15:12:04.000-05:00
FUTURE_COPYBARA_INTEGRATE_REVIEW=#5577 from crisbeto:mdc-chips-d-ts-error d154836 PiperOrigin-RevId: 293466751 Co-authored-by: Abhinay Omkar <abhiomkar@gmail.com>
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -13,8 +13,8 @@ To try Material Components for the web with minimal setup, load the precompiled
 
 ```html
 <head>
-  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
-  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+  <link href="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.css" rel="stylesheet">
+  <script src="https://unpkg.com/material-components-web@v4.0.0/dist/material-components-web.min.js"></script>
 </head>
 ```
 
@@ -82,16 +82,16 @@ We’re going to use `webpack-dev-server` to demonstrate how webpack bundles our
 You’ll need all of these Node dependencies:
 - [webpack](https://www.npmjs.com/package/webpack): Bundles Sass and JavaScript
 - [webpack-dev-server](https://www.npmjs.com/package/webpack-dev-server): Development server
-- [sass-loader](https://www.npmjs.com/package/sass-loader): Loads a Sass file and compiles it to CSS
-- [node-sass](https://www.npmjs.com/package/node-sass): Provides binding for Node.js to Sass, peer dependency to sass-loader
+- [sass-loader](https://www.npmjs.com/package/sass-loader): Webpack loader to preprocess Sass files
+- [sass](https://www.npmjs.com/package/sass): Sass compiler
 - [css-loader](https://www.npmjs.com/package/css-loader): Resolves CSS @import and url() paths
 - [extract-loader](https://github.com/peerigon/extract-loader): Extracts the CSS into a `.css` file
 - [file-loader](https://github.com/webpack-contrib/file-loader): Serves the `.css` file as a public URL
 
 You can install all of them by running this command:
 
 ```
-npm install --save-dev webpack webpack-cli webpack-dev-server css-loader sass-loader node-sass extract-loader file-loader
+npm install --save-dev webpack webpack-cli webpack-dev-server css-loader sass-loader sass extract-loader file-loader
 ```
 
 In order to demonstrate how webpack bundles our Sass, you’ll need an `index.html`. This HTML file needs to include CSS. The CSS is generated by sass-loader, which compiles Sass files into CSS. The CSS is extracted into a `.css` file by extract-loader. Create this simple “hello world” `index.html`:
@@ -137,7 +137,13 @@ module.exports = [{
           },
           { loader: 'extract-loader' },
           { loader: 'css-loader' },
-          { loader: 'sass-loader' },
+          {
+            loader: 'sass-loader',
+            options: {
+              // Prefer Dart Sass
+              implementation: require('sass'),
+            },
+          },
         ]
       }
     ]
@@ -166,11 +172,11 @@ npm install @material/button
 We need to tell our `app.scss` to import the Sass files for `@material/button`. We can also use Sass mixins to customize the button. Replace your “hello world” version of `app.scss` with this code:
 
 ```scss
-@import "@material/button/mdc-button";
+@use '@material/button/mdc-button';
+@use '@material/button';
 
 .foo-button {
-  @include mdc-button-ink-color(teal);
-  @include mdc-states(teal);
+  @include button.container-fill-color(darksalmon);
 }
 ```
 
@@ -180,9 +186,11 @@ We also need to configure sass-loader to understand the `@material` imports used
 {
   loader: 'sass-loader',
   options: {
+    // Prefer Dart Sass
+    implementation: require('sass'),
     sassOptions: {
       includePaths: ['./node_modules']
-    }
+    },
   }
 }
 ```
@@ -226,7 +234,9 @@ Then add `postcss-loader`, using `autoprefixer` as a plugin:
   options: {
     sassOptions: {
       includePaths: ['./node_modules']
-    }
+    },
+    // Prefer Dart Sass
+    implementation: require('sass'),
   }
 },
 ```
@@ -327,9 +337,11 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
+              // Prefer Dart Sass
+              implementation: require('sass'),
               sassOptions: {
                 includePaths: ['./node_modules'],
-              }
+              },
             },
           }
         ],
