docs: options table (#834)

webpack-contrib · Apr 16, 2020 · 24c852a · 24c852a
1 parent f892eba
commit 24c852a
Showing 1 changed file with 55 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -104,8 +104,17 @@ Thankfully there are a two solutions to this problem:
 
 ## Options
 
+|                   Name                    |         Type         |                 Default                 | Description                                               |
+| :---------------------------------------: | :------------------: | :-------------------------------------: | :-------------------------------------------------------- |
+|  **[`implementation`](#implementation)**  |      `{Object}`      |                 `sass`                  | Setup Sass implementation to use.                         |
+|     **[`sassOptions`](#sassoptions)**     | `{Object\|Function}` | defaults values for Sass implementation | Options for Sass.                                         |
+|       **[`sourceMap`](#sourcemap)**       |     `{Boolean}`      |           `compiler.devtool`            | Enables/Disables generation of source maps.               |
+|     **[`prependData`](#sassoptions)**     | `{String\|Function}` |               `undefined`               | Prepends `Sass`/`SCSS` code before the actual entry file. |
+| **[`webpackImporter`](#webpackimporter)** |     `{Boolean}`      |                 `true`                  | Enables/Disables the default Webpack importer.            |
+
 ### `implementation`
 
+Type: `Object`
 Default: `sass`
 
 The special `implementation` option determines which implementation of Sass to use.
@@ -247,6 +256,7 @@ module.exports = {
 ### `sassOptions`
 
 Type: `Object|Function`
+Default: defaults values for Sass implementation
 
 Options for [Dart Sass](http://sass-lang.com/dart-sass) or [Node Sass](https://github.com/sass/node-sass) implementation.
 
@@ -334,19 +344,19 @@ module.exports = {
 };
 ```
 
-### `prependData`
+### `sourceMap`
 
-Type: `String|Function`
-Default: `undefined`
+Type: `Boolean`
+Default: depends on the `compiler.devtool` value
 
-Prepends `Sass`/`SCSS` code before the actual entry file.
-In this case, the `sass-loader` will not override the `data` option but just append the entry's content.
+Enables/Disables generation of source maps.
 
-This is especially useful when some of your Sass variables depend on the environment:
+By default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option.
+All values enable source map generation except `eval` and `false` value.
 
-> ℹ Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this, like multiple Sass entry files.
+> ℹ If a `true` the `sourceMap`, `sourceMapRoot`, `sourceMapEmbed`, `sourceMapContents` and `omitSourceMapUrl` from `sassOptions` will be ignored.
 
-#### `String`
+**webpack.config.js**
 
 ```js
 module.exports = {
@@ -356,11 +366,16 @@ module.exports = {
         test: /\.s[ac]ss$/i,
         use: [
           'style-loader',
-          'css-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
           {
             loader: 'sass-loader',
             options: {
-              prependData: '$env: ' + process.env.NODE_ENV + ';',
+              sourceMap: true,
             },
           },
         ],
@@ -370,7 +385,10 @@ module.exports = {
 };
 ```
 
-#### `Function`
+> ℹ In some rare cases `node-sass` can output invalid source maps (it is a `node-sass` bug).
+> In order to avoid this, you can try to update `node-sass` to latest version or you can try to set within `sassOptions` the `outputStyle` option to `compressed`.
+
+**webpack.config.js**
 
 ```js
 module.exports = {
@@ -384,16 +402,9 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              prependData: (loaderContext) => {
-                // More information about available properties https://webpack.js.org/api/loaders/
-                const { resourcePath, rootContext } = loaderContext;
-                const relativePath = path.relative(rootContext, resourcePath);
-
-                if (relativePath === 'styles/foo.scss') {
-                  return '$value: 100px;';
-                }
-
-                return '$value: 200px;';
+              sourceMap: true,
+              sassOptions: {
+                outputStyle: 'compressed',
               },
             },
           },
@@ -404,19 +415,19 @@ module.exports = {
 };
 ```
 
-### `sourceMap`
+### `prependData`
 
-Type: `Boolean`
-Default: depends on the `compiler.devtool` value
+Type: `String|Function`
+Default: `undefined`
 
-Enables/Disables generation of source maps.
+Prepends `Sass`/`SCSS` code before the actual entry file.
+In this case, the `sass-loader` will not override the `data` option but just append the entry's content.
 
-By default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option.
-All values enable source map generation except `eval` and `false` value.
+This is especially useful when some of your Sass variables depend on the environment:
 
-> ℹ If a `true` the `sourceMap`, `sourceMapRoot`, `sourceMapEmbed`, `sourceMapContents` and `omitSourceMapUrl` from `sassOptions` will be ignored.
+> ℹ Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this, like multiple Sass entry files.
 
-**webpack.config.js**
+#### `String`
 
 ```js
 module.exports = {
@@ -426,16 +437,11 @@ module.exports = {
         test: /\.s[ac]ss$/i,
         use: [
           'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-            },
-          },
+          'css-loader',
           {
             loader: 'sass-loader',
             options: {
-              sourceMap: true,
+              prependData: '$env: ' + process.env.NODE_ENV + ';',
             },
           },
         ],
@@ -445,10 +451,7 @@ module.exports = {
 };
 ```
 
-> ℹ In some rare cases `node-sass` can output invalid source maps (it is a `node-sass` bug).
-> In order to avoid this, you can try to update `node-sass` to latest version or you can try to set within `sassOptions` the `outputStyle` option to `compressed`.
-
-**webpack.config.js**
+#### `Function`
 
 ```js
 module.exports = {
@@ -462,9 +465,16 @@ module.exports = {
           {
             loader: 'sass-loader',
             options: {
-              sourceMap: true,
-              sassOptions: {
-                outputStyle: 'compressed',
+              prependData: (loaderContext) => {
+                // More information about available properties https://webpack.js.org/api/loaders/
+                const { resourcePath, rootContext } = loaderContext;
+                const relativePath = path.relative(rootContext, resourcePath);
+
+                if (relativePath === 'styles/foo.scss') {
+                  return '$value: 100px;';
+                }
+
+                return '$value: 200px;';
               },
             },
           },
@@ -482,7 +492,8 @@ Default: `true`
 
 Enables/Disables the default Webpack importer.
 
-This can improve performance in some cases. Use it with caution because aliases and `@import` at-rules starting with `~` will not work. You can pass own `importer` to solve this (see [`importer docs`](https://github.com/sass/node-sass#importer--v200---experimental)).
+This can improve performance in some cases. Use it with caution because aliases and `@import` at-rules starting with `~` will not work.
+You can pass own `importer` to solve this (see [`importer docs`](https://github.com/sass/node-sass#importer--v200---experimental)).
 
 **webpack.config.js**