Skip to content

Commit dec20a5

Browse files
authored
Update to work with Webpack 5
Changed "Webpack-dev-server" to "webpack serve" to work with Webpack 5. Changed the material importer to be put under 'sassOptions' rather than just options. Similar with the autoprefixer; put it under postcssOptions under options. Don't have issues going through the Getting Started walkthrough now
1 parent 832668d commit dec20a5

File tree

1 file changed

+32
-16
lines changed

1 file changed

+32
-16
lines changed

docs/getting-started.md

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ We’re going to use `webpack-dev-server` to demonstrate how webpack bundles our
7474
```json
7575
{
7676
"scripts": {
77-
"start": "webpack-dev-server"
77+
"start": "webpack serve"
7878
}
7979
}
8080
```
@@ -229,12 +229,16 @@ Then add `postcss-loader`, using `autoprefixer` as a plugin:
229229
```js
230230
{ loader: 'extract-loader' },
231231
{ loader: 'css-loader' },
232-
{
233-
loader: 'postcss-loader',
234-
options: {
235-
plugins: () => [autoprefixer()]
236-
}
237-
},
232+
{
233+
loader: 'postcss-loader',
234+
options: {
235+
postcssOptions: {
236+
plugins: [
237+
autoprefixer()
238+
]
239+
}
240+
}
241+
},
238242
{
239243
loader: 'sass-loader',
240244
options: {
@@ -340,8 +344,12 @@ module.exports = {
340344
{
341345
loader: 'postcss-loader',
342346
options: {
343-
plugins: () => [autoprefixer()]
344-
}
347+
postcssOptions: {
348+
plugins: [
349+
autoprefixer()
350+
]
351+
}
352+
}
345353
},
346354
{
347355
loader: 'sass-loader',
@@ -404,7 +412,7 @@ Add another script to `package.json`:
404412
```json
405413
"scripts": {
406414
"build": "webpack",
407-
"start": "webpack-dev-server"
415+
"start": "webpack serve"
408416
}
409417
```
410418

@@ -460,10 +468,18 @@ function materialImporter(url, prev) {
460468
Then update your `sass-loader` config to the following:
461469

462470
```js
463-
{
464-
loader: 'sass-loader',
465-
options: {
466-
importer: materialImporter
467-
},
468-
}
471+
{
472+
loader: 'sass-loader',
473+
options: {
474+
// Prefer Dart Sass
475+
implementation: require('sass'),
476+
477+
// See https://github.com/webpack-contrib/sass-loader/issues/804
478+
webpackImporter: false,
479+
sassOptions: {
480+
importer: materialImporter,
481+
includePaths: ['./node_modules'],
482+
},
483+
},
484+
}
469485
```

0 commit comments

Comments
 (0)