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" + }) ] }; ```