-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy path115.c6df3ed7cdf29f72f852.chunk.js
1 lines (1 loc) · 93.6 KB
/
115.c6df3ed7cdf29f72f852.chunk.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{376:function(n,s,a){"use strict";a.r(s),s.default='</div>\n<p><a href="https://npmjs.com/package/postcss-loader"><img src="https://img.shields.io/npm/v/postcss-loader.svg" alt="npm"></a>\n<a href="https://nodejs.org/"><img src="https://img.shields.io/node/v/postcss-loader.svg" alt="node"></a>\n<a href="https://david-dm.org/webpack-contrib/postcss-loader"><img src="https://david-dm.org/webpack-contrib/postcss-loader.svg" alt="deps"></a>\n<a href="https://github.com/webpack-contrib/postcss-loader/actions"><img src="https://github.com/webpack-contrib/postcss-loader/workflows/postcss-loader/badge.svg" alt="tests"></a>\n<a href="https://codecov.io/gh/webpack-contrib/postcss-loader"><img src="https://codecov.io/gh/webpack-contrib/postcss-loader/branch/master/graph/badge.svg" alt="coverage"></a>\n<a href="https://packagephobia.now.sh/result?p=postcss-loader"><img src="https://packagephobia.now.sh/badge?p=postcss-loader" alt="size"></a></p>\n<p>Webpack chat: <a href="https://gitter.im/webpack/webpack"><img src="https://badges.gitter.im/webpack/webpack.svg" alt="chat"></a></p>\n<p>PostCSS chat: <a href="https://gitter.im/postcss/postcss"><img src="https://badges.gitter.im/postcss/postcss.svg" alt="chat-postcss"></a></p>\n<p>Loader to process CSS with <a href="https://github.com/postcss/postcss"><code>PostCSS</code></a>.</p>\n<h2 id="getting-started">Getting Started<a href="#getting-started" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>You need webpack v5 to use the latest version. For Webpack v4, you have to install postcss-loader v4.</p>\n<p>To begin, you\'ll need to install <code>postcss-loader</code> and <code>postcss</code>:</p>\n<pre><code class="hljs language-console">npm install --save-dev postcss-loader postcss\n</code></pre>\n<p>Then add the plugin to your <code>webpack</code> config. For example:</p>\n<blockquote>\n<p>In the following configuration the plugin <a href="https://github.com/csstools/postcss-preset-env"><code>postcss-preset-env</code></a> is used, which is not installed by default.</p>\n</blockquote>\n<p><strong>file.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">import</span> css <span class="token keyword">from</span> <span class="token string">"file.css"</span><span class="token punctuation">;</span></code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span>\n <span class="token string">"postcss-preset-env"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token comment">// Options</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Alternative use with <a href="#config">config files</a>:</p>\n<p><strong>postcss.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span>\n <span class="token string">"postcss-preset-env"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token comment">// Options</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>The loader <strong>automatically</strong> searches for configuration files.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>And run <code>webpack</code> via your preferred method.</p>\n<h2 id="options">Options<a href="#options" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<table>\n<thead>\n<tr>\n<th align="center">Name</th>\n<th align="center">Type</th>\n<th align="center">Default</th>\n<th align="left">Description</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><a href="#execute"><code>execute</code></a><p class="description mobile"><code>{Boolean}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Boolean}</code></td>\n<td align="center"><code>undefined</code></td>\n<td align="left">Enable PostCSS Parser support in \n<code>CSS-in-JS</code></td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><a href="#postcssoptions"><code>postcssOptions</code></a><p class="description mobile"><code>{Object\\|Function}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Object\\|Function}</code></td>\n<td align="center"><code>defaults values for Postcss.process</code></td>\n<td align="left">Set \n<code>PostCSS</code>\n options and plugins</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><a href="#sourcemap"><code>sourceMap</code></a><p class="description mobile"><code>{Boolean}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Boolean}</code></td>\n<td align="center"><code>compiler.devtool</code></td>\n<td align="left">Enables/Disables generation of source maps</td>\n</tr>\n<tr>\n<td align="center"><div class="title"><p>Name</p><p>Type</p><p>Default</p><p>Description</p></div>\n<div class="content"><p><a href="#implementation"><code>implementation</code></a><p class="description mobile"><code>{Function\\|String}</code></p></p></div></td>\n<td align="center" class="description desktop"><code>{Function\\|String}</code></td>\n<td align="center"><code>postcss</code></td>\n<td align="left">Setup PostCSS implementation to use</td>\n</tr>\n</tbody>\n</table>\n<h3 id="execute"><code>execute</code><a href="#execute" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Boolean</code>\nDefault: <code>undefined</code></p>\n<p>If you use JS styles the <a href="https://github.com/postcss/postcss-js"><code>postcss-js</code></a> parser, add the <code>execute</code> option.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.style.js$/</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n parser<span class="token punctuation">:</span> <span class="token string">"postcss-js"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n execute<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="postcssoptions"><code>postcssOptions</code><a href="#postcssoptions" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Object|Function</code>\nDefault: <code>undefined</code></p>\n<p>Allows to set <a href="https://postcss.org/api/#processoptions"><code>PostCSS options</code></a> and plugins.</p>\n<p>All <code>PostCSS</code> options are supported.\nThere is the special <code>config</code> option for config files. How it works and how it can be configured is described below.</p>\n<p>We recommend do not specify <code>from</code>, <code>to</code> and <code>map</code> options, because this can lead to wrong path in source maps.\nIf you need source maps please use the <a href="#sourcemap"><code>sourcemap</code></a> option.</p>\n<h4 id="object"><code>Object</code><a href="#object" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Setup <code>plugins</code>:</p>\n<p><strong>webpack.config.js</strong> (<strong>recommended</strong>)</p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> myOtherPostcssPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"postcss-my-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.sss$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"postcss-import"</span><span class="token punctuation">,</span>\n <span class="token punctuation">[</span><span class="token string">"postcss-short"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> prefix<span class="token punctuation">:</span> <span class="token string">"x"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"my-postcss-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token function">myOtherPostcssPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span> myOption<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token comment">// Deprecated and will be removed in the next major release</span>\n <span class="token punctuation">{</span> <span class="token string">"postcss-nested"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> preserveEmpty<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p><strong>webpack.config.js</strong> (<strong>deprecated</strong>, will be removed in the next major release)</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.sss$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n <span class="token string">"postcss-import"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token string">"postcss-short"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> prefix<span class="token punctuation">:</span> <span class="token string">"x"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Setup <code>syntax</code>:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.sss$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// Can be `String`</span>\n syntax<span class="token punctuation">:</span> <span class="token string">"sugarss"</span><span class="token punctuation">,</span>\n <span class="token comment">// Can be `Object`</span>\n syntax<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"sugarss"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Setup <code>parser</code>:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.sss$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// Can be `String`</span>\n parser<span class="token punctuation">:</span> <span class="token string">"sugarss"</span><span class="token punctuation">,</span>\n <span class="token comment">// Can be `Object`</span>\n parser<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"sugarss"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token comment">// Can be `Function`</span>\n parser<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"sugarss"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>parse<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Setup <code>stringifier</code>:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> Midas <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"midas"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> midas <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Midas</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.sss$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// Can be `String`</span>\n stringifier<span class="token punctuation">:</span> <span class="token string">"sugarss"</span><span class="token punctuation">,</span>\n <span class="token comment">// Can be `Object`</span>\n stringifier<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"sugarss"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token comment">// Can be `Function`</span>\n stringifier<span class="token punctuation">:</span> midas<span class="token punctuation">.</span>stringifier<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="function"><code>Function</code><a href="#function" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(css|sss)$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">(</span>loaderContext<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/\\.sss$/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>loaderContext<span class="token punctuation">.</span>resourcePath<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n parser<span class="token punctuation">:</span> <span class="token string">"sugarss"</span><span class="token punctuation">,</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span><span class="token string">"postcss-short"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> prefix<span class="token punctuation">:</span> <span class="token string">"x"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token string">"postcss-preset-env"</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span><span class="token string">"postcss-short"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> prefix<span class="token punctuation">:</span> <span class="token string">"x"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token string">"postcss-preset-env"</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="config"><code>config</code><a href="#config" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Type: <code>Boolean|String</code>\nDefault: <code>undefined</code></p>\n<p>Allows to set options using config files.\nOptions specified in the config file are combined with options passed to the loader, the loader options overwrite options from config.</p>\n<h5 id="config-files">Config Files<a href="#config-files" aria-hidden="true"><span class="icon icon-link"></span></a></h5>\n<p>The loader will search up the directory tree for configuration in the following places:</p>\n<ul>\n<li>a <code>postcss</code> property in <code>package.json</code></li>\n<li>a <code>.postcssrc</code> file in JSON or YAML format</li>\n<li>a <code>.postcssrc.json</code>, <code>.postcssrc.yaml</code>, <code>.postcssrc.yml</code>, <code>.postcssrc.js</code>, or <code>.postcssrc.cjs</code> file</li>\n<li>a <code>postcss.config.js</code> or <code>postcss.config.cjs</code> CommonJS module exporting an object (<strong>recommended</strong>)</li>\n</ul>\n<h5 id="examples-of-config-files">Examples of Config Files<a href="#examples-of-config-files" aria-hidden="true"><span class="icon icon-link"></span></a></h5>\n<p>Using <code>Object</code> notation:</p>\n<p><strong>postcss.config.js</strong> (<strong>recommend</strong>)</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token comment">// You can specify any options from https://postcss.org/api/#processoptions here</span>\n <span class="token comment">// parser: \'sugarss\',</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token comment">// Plugins for PostCSS</span>\n <span class="token punctuation">[</span><span class="token string">"postcss-short"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> prefix<span class="token punctuation">:</span> <span class="token string">"x"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token string">"postcss-preset-env"</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Using <code>Function</code> notation:</p>\n<p><strong>postcss.config.js</strong> (<strong>recommend</strong>)</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span>api<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// `api.file` - path to the file</span>\n <span class="token comment">// `api.mode` - `mode` value of webpack, please read https://webpack.js.org/configuration/mode/</span>\n <span class="token comment">// `api.webpackLoaderContext` - loader context for complex use cases</span>\n <span class="token comment">// `api.env` - alias `api.mode` for compatibility with `postcss-cli`</span>\n <span class="token comment">// `api.options` - the `postcssOptions` options</span>\n\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/\\.sss$/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>api<span class="token punctuation">.</span>file<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token comment">// You can specify any options from https://postcss.org/api/#processoptions here</span>\n parser<span class="token punctuation">:</span> <span class="token string">"sugarss"</span><span class="token punctuation">,</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token comment">// Plugins for PostCSS</span>\n <span class="token punctuation">[</span><span class="token string">"postcss-short"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> prefix<span class="token punctuation">:</span> <span class="token string">"x"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token string">"postcss-preset-env"</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n <span class="token comment">// You can specify any options from https://postcss.org/api/#processoptions here</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token comment">// Plugins for PostCSS</span>\n <span class="token punctuation">[</span><span class="token string">"postcss-short"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> prefix<span class="token punctuation">:</span> <span class="token string">"x"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token string">"postcss-preset-env"</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p><strong>postcss.config.js</strong> (<strong>deprecated</strong>, will be removed in the next major release)</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token comment">// You can specify any options from https://postcss.org/api/#processoptions here</span>\n <span class="token comment">// parser: \'sugarss\',</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n <span class="token comment">// Plugins for PostCSS</span>\n <span class="token string">"postcss-short"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span> prefix<span class="token punctuation">:</span> <span class="token string">"x"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token string">"postcss-preset-env"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h5 id="config-cascade">Config Cascade<a href="#config-cascade" aria-hidden="true"><span class="icon icon-link"></span></a></h5>\n<p>You can use different <code>postcss.config.js</code> files in different directories.\nConfig lookup starts from <code>path.dirname(file)</code> and walks the file tree upwards until a config file is found.</p>\n<pre><code>|– components\n| |– component\n| | |– index.js\n| | |– index.png\n| | |– style.css (1)\n| | |– postcss.config.js (1)\n| |– component\n| | |– index.js\n| | |– image.png\n| | |– style.css (2)\n|\n|– postcss.config.js (1 && 2 (recommended))\n|– webpack.config.js\n|\n|– package.json\n</code></pre>\n<p>After setting up your <code>postcss.config.js</code>, add <code>postcss-loader</code> to your <code>webpack.config.js</code>.\nYou can use it standalone or in conjunction with <code>css-loader</code> (recommended).</p>\n<p>Use it <strong>before</strong> <code>css-loader</code> and <code>style-loader</code>, but <strong>after</strong> other preprocessor loaders like e.g <code>sass|less|stylus-loader</code>, if you use any (since <a href="/concepts/loaders/#configuration">webpack loaders evaluate right to left/bottom to top</a>).</p>\n<p><strong>webpack.config.js</strong> (<strong>recommended</strong>)</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n importLoaders<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="boolean">Boolean<a href="#boolean" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Enables/Disables autoloading config.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n config<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="string">String<a href="#string" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Allows to specify the path to the config file.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n config<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"custom.config.js"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="sourcemap"><code>sourceMap</code><a href="#sourcemap" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Boolean</code>\nDefault: depends on the <code>compiler.devtool</code> value</p>\n<p>By default generation of source maps depends on the <a href="/configuration/devtool/"><code>devtool</code></a> option.\nAll values enable source map generation except <code>eval</code> and <code>false</code> value.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"style-loader"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> options<span class="token punctuation">:</span> <span class="token punctuation">{</span> sourceMap<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span> options<span class="token punctuation">:</span> <span class="token punctuation">{</span> sourceMap<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"sass-loader"</span><span class="token punctuation">,</span> options<span class="token punctuation">:</span> <span class="token punctuation">{</span> sourceMap<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Alternative setup:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n devtool<span class="token punctuation">:</span> <span class="token string">"source-map"</span><span class="token punctuation">,</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"style-loader"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"sass-loader"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="implementation"><code>implementation</code><a href="#implementation" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Function | String</code>\nDefault: <code>postcss</code></p>\n<p>The special <code>implementation</code> option determines which implementation of PostCSS to use. Overrides the locally installed <code>peerDependency</code> version of <code>postcss</code>.</p>\n<p><strong>This option is only really useful for downstream tooling authors to ease the PostCSS 7-to-8 transition.</strong></p>\n<h4 id="function-1">Function<a href="#function-1" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"style-loader"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span> implementation<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"postcss"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"sass-loader"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="string-1">String<a href="#string-1" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"style-loader"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span> implementation<span class="token punctuation">:</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">"postcss"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span> loader<span class="token punctuation">:</span> <span class="token string">"sass-loader"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h2 id="examples">Examples<a href="#examples" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<h3 id="sugarss">SugarSS<a href="#sugarss" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>You\'ll need to install <code>sugarss</code>:</p>\n<pre><code class="hljs language-console">npm install --save-dev sugarss\n</code></pre>\n<p>Using <a href="https://github.com/postcss/sugarss"><code>SugarSS</code></a> syntax.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.sss$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span> importLoaders<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n parser<span class="token punctuation">:</span> <span class="token string">"sugarss"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="autoprefixer">Autoprefixer<a href="#autoprefixer" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>You\'ll need to install <code>autoprefixer</code>:</p>\n<pre><code class="hljs language-console">npm install --save-dev autoprefixer\n</code></pre>\n<p>Add vendor prefixes to CSS rules using <a href="https://github.com/postcss/autoprefixer"><code>autoprefixer</code></a>.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span> importLoaders<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span>\n <span class="token string">"autoprefixer"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token comment">// Options</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<blockquote>\n<p>:warning: <a href="https://github.com/csstools/postcss-preset-env"><code>postcss-preset-env</code></a> includes <a href="https://github.com/postcss/autoprefixer"><code>autoprefixer</code></a>, so adding it separately is not necessary if you already use the preset. More <a href="https://github.com/csstools/postcss-preset-env#autoprefixer">information</a></p>\n</blockquote>\n<h3 id="postcss-preset-env">PostCSS Preset Env<a href="#postcss-preset-env" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>You\'ll need to install <code>postcss-preset-env</code>:</p>\n<pre><code class="hljs language-console">npm install --save-dev postcss-preset-env\n</code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span> importLoaders<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">[</span>\n <span class="token string">"postcss-preset-env"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n <span class="token comment">// Options</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="css-modules">CSS Modules<a href="#css-modules" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>What is <code>CSS Modules</code>? Please <a href="https://github.com/webpack-contrib/css-loader#modules">read</a>.</p>\n<p>No additional options required on the <code>postcss-loader</code> side.\nTo make them work properly, either add the <code>css-loader</code>’s <code>importLoaders</code> option.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n modules<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n importLoaders<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="css-in-js-and-postcss-js">CSS-in-JS and <a href="https://github.com/postcss/postcss-js"><code>postcss-js</code></a><a href="#css-in-js-and-postcss-js" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>You\'ll need to install <code>postcss-js</code>:</p>\n<pre><code class="hljs language-console">npm install --save-dev postcss-js\n</code></pre>\n<p>If you want to process styles written in JavaScript, use the <a href="https://github.com/postcss/postcss-js"><code>postcss-js</code></a> parser.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.style.js$/</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n importLoaders<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n parser<span class="token punctuation">:</span> <span class="token string">"postcss-js"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n execute<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>As result you will be able to write styles in the following way</p>\n<pre><code class="hljs language-js"><span class="token keyword">import</span> colors <span class="token keyword">from</span> <span class="token string">"./styles/colors"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>\n <span class="token string">".menu"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>\n color<span class="token punctuation">:</span> colors<span class="token punctuation">.</span>main<span class="token punctuation">,</span>\n height<span class="token punctuation">:</span> <span class="token number">25</span><span class="token punctuation">,</span>\n <span class="token string">"&_link"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>\n color<span class="token punctuation">:</span> <span class="token string">"white"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<blockquote>\n<p>:warning: If you are using Babel you need to do the following in order for the setup to work</p>\n<ol>\n<li>Add <a href="https://github.com/59naga/babel-plugin-add-module-exports"><code>babel-plugin-add-module-exports</code></a> to your configuration.</li>\n<li>You need to have only one <strong>default</strong> export per style module.</li>\n</ol>\n</blockquote>\n<h3 id="extract-css">Extract CSS<a href="#extract-css" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Using <a href="/plugins/mini-css-extract-plugin/"><code>mini-css-extract-plugin</code></a>.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> isProductionMode <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">"production"</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> MiniCssExtractPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"mini-css-extract-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n mode<span class="token punctuation">:</span> isProductionMode <span class="token operator">?</span> <span class="token string">"production"</span> <span class="token punctuation">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n isProductionMode <span class="token operator">?</span> MiniCssExtractPlugin<span class="token punctuation">.</span>loader <span class="token punctuation">:</span> <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token keyword">new</span> <span class="token class-name">MiniCssExtractPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n filename<span class="token punctuation">:</span> isProductionMode <span class="token operator">?</span> <span class="token string">"[name].[contenthash].css"</span> <span class="token punctuation">:</span> <span class="token string">"[name].css"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="emit-assets">Emit assets<a href="#emit-assets" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>To write a asset from PostCSS plugin to the webpack, need to add a message in <code>result.messages</code>.</p>\n<p>The message should contain the following fields:</p>\n<ul>\n<li><code>type</code> = <code>asset</code> - Message type (require, should be equal <code>asset</code>)</li>\n<li><code>file</code> - file name (require)</li>\n<li><code>content</code> - file content (require)</li>\n<li><code>sourceMap</code> - sourceMap</li>\n<li><code>info</code> - asset info</li>\n</ul>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> <span class="token function-variable function">customPlugin</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>css<span class="token punctuation">,</span> result<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n result<span class="token punctuation">.</span>messages<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n type<span class="token punctuation">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>\n file<span class="token punctuation">:</span> <span class="token string">"sprite.svg"</span><span class="token punctuation">,</span>\n content<span class="token punctuation">:</span> <span class="token string">"<svg>...</svg>"</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> postcssPlugin <span class="token operator">=</span> postcss<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">"postcss-assets"</span><span class="token punctuation">,</span> customPlugin<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token function">postcssPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="add-dependencies-contextdependencies-builddependencies-missingdependencies">Add dependencies, contextDependencies, buildDependencies, missingDependencies<a href="#add-dependencies-contextdependencies-builddependencies-missingdependencies" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>The dependencies are necessary for webpack to understand when it needs to run recompilation on the changed files.</p>\n<p>There are two way to add dependencies:</p>\n<ol>\n<li>(Recommended). The plugin may emit messages in <code>result.messages</code>.</li>\n</ol>\n<p>The message should contain the following fields:</p>\n<ul>\n<li><code>type</code> = <code>dependency</code> - Message type (require, should be equal <code>dependency</code>, <code>context-dependency</code>, <code>build-dependency</code> or <code>missing-dependency</code>)</li>\n<li><code>file</code> - absolute file path (require)</li>\n</ul>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">customPlugin</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>css<span class="token punctuation">,</span> result<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n result<span class="token punctuation">.</span>messages<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n type<span class="token punctuation">:</span> <span class="token string">"dependency"</span><span class="token punctuation">,</span>\n file<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"path"</span><span class="token punctuation">,</span> <span class="token string">"to"</span><span class="token punctuation">,</span> <span class="token string">"file"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> postcssPlugin <span class="token operator">=</span> postcss<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">"postcss-assets"</span><span class="token punctuation">,</span> customPlugin<span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token function">postcssPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<ol start="2">\n<li>Pass <code>loaderContext</code> in plugin.</li>\n</ol>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token string">"style-loader"</span><span class="token punctuation">,</span>\n <span class="token string">"css-loader"</span><span class="token punctuation">,</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">"postcss-loader"</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n postcssOptions<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n config<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"path/to/postcss.config.js"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p><strong>postcss.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token punctuation">(</span>api<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path/to/customPlugin"</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n loaderContext<span class="token punctuation">:</span> api<span class="token punctuation">.</span>webpackLoaderContext<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<p><strong>customPlugin.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">customPlugin</span> <span class="token operator">=</span> <span class="token punctuation">(</span>loaderContext<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>css<span class="token punctuation">,</span> result<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n loaderContext<span class="token punctuation">.</span>webpack<span class="token punctuation">.</span><span class="token function">addDependency</span><span class="token punctuation">(</span>\n path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"path"</span><span class="token punctuation">,</span> <span class="token string">"to"</span><span class="token punctuation">,</span> <span class="token string">"file"</span><span class="token punctuation">)</span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports <span class="token operator">=</span> postcss<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">"postcss-assets"</span><span class="token punctuation">,</span> customPlugin<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<h2 id="contributing">Contributing<a href="#contributing" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>Please take a moment to read our contributing guidelines if you haven\'t yet done so.</p>\n<p><a href="https://github.com/postcss/postcss-loader/blob/master/.github/CONTRIBUTING.md">CONTRIBUTING</a></p>\n<h2 id="license">License<a href="#license" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p><a href="https://github.com/postcss/postcss-loader/blob/master/LICENSE">MIT</a></p>\n'}}]);