diff --git a/README.md b/README.md
index 24c894c9..b6b42ff5 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@
Loads a Sass/SCSS file and compiles it to CSS.
-Use the [css-loader](https://github.com/webpack-contrib/css-loader) or the [raw-loader](https://github.com/webpack-contrib/raw-loader) to turn it into a JS module and the [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract it into a separate file.
+Use the [css-loader](https://github.com/webpack-contrib/css-loader) or the [raw-loader](https://github.com/webpack-contrib/raw-loader) to turn it into a JS module and the [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to extract it into a separate file.
Looking for the webpack 1 loader? Check out the [archive/webpack-1 branch](https://github.com/webpack-contrib/sass-loader/tree/archive/webpack-1).
Install
@@ -45,13 +45,11 @@ module.exports = {
module: {
rules: [{
test: /\.scss$/,
- use: [{
- loader: "style-loader" // creates style nodes from JS strings
- }, {
- loader: "css-loader" // translates CSS into CommonJS
- }, {
- loader: "sass-loader" // compiles Sass to CSS
- }]
+ use: [
+ "style-loader", // creates style nodes from JS strings
+ "css-loader", // translates CSS into CommonJS
+ "sass-loader" // compiles Sass to CSS
+ ]
}]
}
};
@@ -85,34 +83,31 @@ See [node-sass](https://github.com/andrew/node-sass) for all available Sass opti
### In production
-Usually, it's recommended to extract the style sheets into a dedicated file in production using the [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin). This way your styles are not dependent on JavaScript:
+Usually, it's recommended to extract the style sheets into a dedicated file in production using the [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin). This way your styles are not dependent on JavaScript:
```js
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-
-const extractSass = new ExtractTextPlugin({
- filename: "[name].[contenthash].css",
- disable: process.env.NODE_ENV === "development"
-});
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
- use: extractSass.extract({
- use: [{
- loader: "css-loader"
- }, {
- loader: "sass-loader"
- }],
- // use style-loader in development
- fallback: "style-loader"
- })
+ use: [
+ // fallback to style-loader in development
+ process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
+ "css-loader",
+ "sass-loader"
+ ]
}]
},
plugins: [
- extractSass
+ new MiniCssExtractPlugin({
+ // Options similar to the same options in webpackOptions.output
+ // both options are optional
+ filename: "[name].css",
+ chunkFilename: "[id].css"
+ })
]
};
```