diff --git a/docs/getting-started.md b/docs/getting-started.md
index 7d3273ca440..d8d854a7efd 100644
--- 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
-
-
+
+
```
@@ -82,8 +82,8 @@ 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
@@ -91,7 +91,7 @@ You’ll need all of these Node dependencies:
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'],
- }
+ },
},
}
],