\href{https://npmjs.com/package/postcss-loader}{\texttt{ }} \href{https://nodejs.org}{\texttt{ }} \href{https://david-dm.org/postcss/postcss-loader}{\texttt{ }} \href{https://travis-ci.org/postcss/postcss-loader}{\texttt{ }} \href{https://coveralls.io/github/postcss/postcss-loader}{\texttt{ }} \href{https://gitter.im/postcss/postcss}{\texttt{ }}

  \href{https://github.com/webpack/webpack}{\texttt{  }}  \href{https://evilmartians.com/?utm_source=postcss}{\texttt{  }}  \doxysection*{Post\+CSS Loader}

 

Loader for \href{https://webpack.js.org/}{\texttt{ webpack}} to process CSS with \href{https://postcss.org/}{\texttt{ Post\+CSS}}

 

\doxysubsection*{Install}


\begin{DoxyCode}{0}
\DoxyCodeLine{npm i -\/D postcss-\/loader }

\end{DoxyCode}


\doxysubsection*{Usage}\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21338}{}\doxysubsubsection{$<$tt$>$\+Configuration$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21338}
$\ast$$\ast${\ttfamily postcss.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  parser: 'sugarss',}
\DoxyCodeLine{  plugins: \{}
\DoxyCodeLine{    'postcss-\/import': \{\},}
\DoxyCodeLine{    'postcss-\/preset-\/env': \{\},}
\DoxyCodeLine{    'cssnano': \{\}}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


You can read more about common Post\+CSS Config \href{https://github.com/michael-ciniawsky/postcss-load-config}{\texttt{ here}}.\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21339}{}\doxysubsubsection{$<$tt$>$\+Config Cascade$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21339}
You can use different {\ttfamily postcss.\+config.\+js} files in different directories. Config lookup starts from {\ttfamily path.\+dirname(file)} and walks the file tree upwards until a config file is found.


\begin{DoxyCode}{0}
\DoxyCodeLine{|– components}
\DoxyCodeLine{| |– component}
\DoxyCodeLine{| | |– index.js}
\DoxyCodeLine{| | |– index.png}
\DoxyCodeLine{| | |– style.css (1)}
\DoxyCodeLine{| | |– postcss.config.js (1)}
\DoxyCodeLine{| |– component}
\DoxyCodeLine{| | |– index.js}
\DoxyCodeLine{| | |– image.png}
\DoxyCodeLine{| | |– style.css (2)}
\DoxyCodeLine{|}
\DoxyCodeLine{|– postcss.config.js (1 \&\& 2 (recommended))}
\DoxyCodeLine{|– webpack.config.js}
\DoxyCodeLine{|}
\DoxyCodeLine{|– package.json }

\end{DoxyCode}


After setting up your {\ttfamily postcss.\+config.\+js}, add {\ttfamily postcss-\/loader} to your {\ttfamily webpack.\+config.\+js}. You can use it standalone or in conjunction with {\ttfamily css-\/loader} (recommended). Use it {\bfseries{after}} {\ttfamily css-\/loader} and {\ttfamily style-\/loader}, but {\bfseries{before}} other preprocessor loaders like e.\+g {\ttfamily sass$\vert$less$\vert$stylus-\/loader}, if you use any.

$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/,}
\DoxyCodeLine{        use: [ 'style-\/loader', 'postcss-\/loader' ]}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    ]}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


\begin{quote}
⚠️ When {\ttfamily postcss-\/loader} is used standalone (without {\ttfamily css-\/loader}) don\textquotesingle{}t use {\ttfamily @import} in your CSS, since this can lead to quite bloated bundles \end{quote}
$\ast$$\ast${\ttfamily webpack.\+config.\+js} (recommended)$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          \{ loader: 'css-\/loader', options: \{ importLoaders: 1 \} \},}
\DoxyCodeLine{          'postcss-\/loader'}
\DoxyCodeLine{        ]}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    ]}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


\doxysubsection*{Options}

\tabulinesep=1mm
\begin{longtabu}spread 0pt [c]{*{4}{|X[-1]}|}
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Name   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Default   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-4}
\endfirsthead
\hline
\endfoot
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Name   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Default   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-4}
\endhead
\PBS\centering \href{\#exec}{\texttt{ {\ttfamily exec}}}   &\PBS\centering {\ttfamily \{Boolean\}}   &\PBS\centering {\ttfamily undefined}   &Enable Post\+CSS Parser support in {\ttfamily CSS-\/in-\/\+JS}    \\\cline{1-4}
\PBS\centering \href{\#syntaxes}{\texttt{ {\ttfamily parser}}}   &\PBS\centering {\ttfamily \{String\textbackslash{}$\vert$\+Object\}}   &\PBS\centering {\ttfamily undefined}   &Set Post\+CSS Parser    \\\cline{1-4}
\PBS\centering \href{\#syntaxes}{\texttt{ {\ttfamily syntax}}}   &\PBS\centering {\ttfamily \{String\textbackslash{}$\vert$\+Object\}}   &\PBS\centering {\ttfamily undefined}   &Set Post\+CSS Syntax    \\\cline{1-4}
\PBS\centering \href{\#syntaxes}{\texttt{ {\ttfamily stringifier}}}   &\PBS\centering {\ttfamily \{String\textbackslash{}$\vert$\+Object\}}   &\PBS\centering {\ttfamily undefined}   &Set Post\+CSS Stringifier    \\\cline{1-4}
\PBS\centering \href{\#config}{\texttt{ {\ttfamily config}}}   &\PBS\centering {\ttfamily \{Object\}}   &\PBS\centering {\ttfamily undefined}   &Set {\ttfamily postcss.\+config.\+js} config path \&\& {\ttfamily ctx}    \\\cline{1-4}
\PBS\centering \href{\#plugins}{\texttt{ {\ttfamily plugins}}}   &\PBS\centering {\ttfamily \{Array\textbackslash{}$\vert$\+Function\}}   &\PBS\centering {\ttfamily \mbox{[}\mbox{]}}   &Set Post\+CSS Plugins    \\\cline{1-4}
\PBS\centering \href{\#sourcemap}{\texttt{ {\ttfamily source\+Map}}}   &\PBS\centering {\ttfamily \{String\textbackslash{}$\vert$\+Boolean\}}   &\PBS\centering {\ttfamily false}   &Enable Source Maps   \\\cline{1-4}
\end{longtabu}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21340}{}\doxysubsubsection{$<$tt$>$\+Exec$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21340}
If you use JS styles without the \href{https://github.com/postcss/postcss-js}{\texttt{ {\ttfamily postcss-\/js}}} parser, add the {\ttfamily exec} option.

$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  test: /\(\backslash\).style.js\$/,}
\DoxyCodeLine{  use: [}
\DoxyCodeLine{    'style-\/loader',}
\DoxyCodeLine{    \{ loader: 'css-\/loader', options: \{ importLoaders: 1 \} \},}
\DoxyCodeLine{    \{ loader: 'postcss-\/loader', options: \{ parser: 'sugarss', exec: true \} \}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21341}{}\doxysubsubsection{$<$tt$>$\+Config$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21341}
\tabulinesep=1mm
\begin{longtabu}spread 0pt [c]{*{4}{|X[-1]}|}
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Name   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Default   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-4}
\endfirsthead
\hline
\endfoot
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Name   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Default   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-4}
\endhead
\PBS\centering \href{\#path}{\texttt{ {\ttfamily path}}}   &\PBS\centering {\ttfamily \{String\}}   &\PBS\centering {\ttfamily undefined}   &Post\+CSS Config Directory    \\\cline{1-4}
\PBS\centering \href{\#context}{\texttt{ {\ttfamily context}}}   &\PBS\centering {\ttfamily \{Object\}}   &\PBS\centering {\ttfamily undefined}   &Post\+CSS Config Context   \\\cline{1-4}
\end{longtabu}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21342}{}\doxyparagraph{$<$tt$>$\+Path$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21342}
You can manually specify the path to search for your config ({\ttfamily postcss.\+config.\+js}) with the {\ttfamily config.\+path} option. This is needed if you store your config in a separate e.\+g {\ttfamily ./config $\vert$$\vert$ ./.config} folder.

\begin{quote}
⚠️ Otherwise it is {\bfseries{unnecessary}} to set this option and is {\bfseries{not}} recommended \end{quote}
\begin{quote}
⚠️ Note that you {\bfseries{can\textquotesingle{}t}} use a {\bfseries{filename}} other than the \href{e.g `.postcssrc.js`, `postcss.config.js`}{\texttt{ supported config formats}}, this option only allows you to manually specify the {\bfseries{directory}} where config lookup should {\bfseries{start}} from \end{quote}
$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  loader: 'postcss-\/loader',}
\DoxyCodeLine{  options: \{}
\DoxyCodeLine{    config: \{}
\DoxyCodeLine{      path: 'path/to/.config/' ✅}
\DoxyCodeLine{      path: 'path/to/.config/css.config.js' ❌}
\DoxyCodeLine{    \}}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21343}{}\doxyparagraph{$<$tt$>$\+Context (ctx)$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21343}
\tabulinesep=1mm
\begin{longtabu}spread 0pt [c]{*{4}{|X[-1]}|}
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Name   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Default   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-4}
\endfirsthead
\hline
\endfoot
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Name   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Default   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-4}
\endhead
\PBS\centering {\ttfamily env}   &\PBS\centering {\ttfamily \{String\}}   &\PBS\centering `\textquotesingle{}development'{\ttfamily \textbackslash{}ilinebr $<$/td$>$ $<$td class=\char`\"{}markdown\+Table\+Body\+Left\char`\"{}$>$}process.\+env.\+NODE\+\_\+\+ENV$<$tt$>$\textbackslash{}ilinebr $<$/td$>$ $<$/tr$>$ $<$tr class=\char`\"{}markdown\+Table\+Row\+Even\char`\"{}$>$ $<$td class=\char`\"{}markdown\+Table\+Body\+Center\char`\"{}$>$file{\ttfamily \textbackslash{}ilinebr $<$/td$>$ $<$td class=\char`\"{}markdown\+Table\+Body\+Center\char`\"{}$>$}\{Object\}{\ttfamily \textbackslash{}ilinebr $<$/td$>$ $<$td class=\char`\"{}markdown\+Table\+Body\+Center\char`\"{}$>$}loader.\+resource\+Path$<$tt$>$\textbackslash{}ilinebr $<$/td$>$ $<$td class=\char`\"{}markdown\+Table\+Body\+Left\char`\"{}$>$extname{\ttfamily ,}dirname{\ttfamily ,}basename{\ttfamily \textbackslash{}ilinebr $<$/td$>$ $<$/tr$>$ $<$tr class=\char`\"{}markdown\+Table\+Row\+Odd\char`\"{}$>$ $<$td class=\char`\"{}markdown\+Table\+Body\+Center\char`\"{}$>$}options{\ttfamily \textbackslash{}ilinebr $<$/td$>$ $<$td class=\char`\"{}markdown\+Table\+Body\+Center\char`\"{}$>$}\{Object\}{\ttfamily \textbackslash{}ilinebr $<$/td$>$ $<$td class=\char`\"{}markdown\+Table\+Body\+Center\char`\"{}$>$}\{\}\`{}   &Options   \\\cline{1-4}
\end{longtabu}


{\ttfamily postcss-\/loader} exposes context {\ttfamily ctx} to the config file, making your {\ttfamily postcss.\+config.\+js} dynamic, so can use it to do some real magic ✨

$\ast$$\ast${\ttfamily postcss.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = (\{ file, options, env \}) => (\{}
\DoxyCodeLine{  parser: file.extname === '.sss' ? 'sugarss' : false,}
\DoxyCodeLine{  plugins: \{}
\DoxyCodeLine{    'postcss-\/import': \{ root: file.dirname \},}
\DoxyCodeLine{    'postcss-\/preset-\/env': options['postcss-\/preset-\/env'] ? options['postcss-\/preset-\/env'] : false,}
\DoxyCodeLine{    'cssnano': env === 'production' ? options.cssnano : false}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\}) }

\end{DoxyCode}


$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  loader: 'postcss-\/loader',}
\DoxyCodeLine{  options: \{}
\DoxyCodeLine{    config: \{}
\DoxyCodeLine{      ctx: \{}
\DoxyCodeLine{        'postcss-\/preset-\/env': \{...options\},}
\DoxyCodeLine{        cssnano: \{...options\},}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    \}}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21344}{}\doxysubsubsection{$<$tt$>$\+Plugins$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21344}
$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  loader: 'postcss-\/loader',}
\DoxyCodeLine{  options: \{}
\DoxyCodeLine{    ident: 'postcss',}
\DoxyCodeLine{    plugins: (loader) => [}
\DoxyCodeLine{      require('postcss-\/import')(\{ root: loader.resourcePath \}),}
\DoxyCodeLine{      require('postcss-\/preset-\/env')(),}
\DoxyCodeLine{      require('cssnano')()}
\DoxyCodeLine{    ]}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


\begin{quote}
⚠️ webpack requires an identifier ({\ttfamily ident}) in {\ttfamily options} when {\ttfamily \{Function\}/require} is used (Complex Options). The {\ttfamily ident} can be freely named as long as it is unique. It\textquotesingle{}s recommended to name it (`ident\+: \textquotesingle{}postcss'\`{}) \end{quote}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21345}{}\doxysubsubsection{$<$tt$>$\+Syntaxes$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21345}
\tabulinesep=1mm
\begin{longtabu}spread 0pt [c]{*{4}{|X[-1]}|}
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Name   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Default   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-4}
\endfirsthead
\hline
\endfoot
\hline
\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Name   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Type   }&\PBS\centering \cellcolor{\tableheadbgcolor}\textbf{ Default   }&\cellcolor{\tableheadbgcolor}\textbf{ Description    }\\\cline{1-4}
\endhead
\PBS\centering \href{\#parser}{\texttt{ {\ttfamily parser}}}   &\PBS\centering {\ttfamily \{String\textbackslash{}$\vert$\+Function\}}   &\PBS\centering {\ttfamily undefined}   &Custom Post\+CSS Parser    \\\cline{1-4}
\PBS\centering \href{\#syntax}{\texttt{ {\ttfamily syntax}}}   &\PBS\centering {\ttfamily \{String\textbackslash{}$\vert$\+Function\}}   &\PBS\centering {\ttfamily undefined}   &Custom Post\+CSS Syntax    \\\cline{1-4}
\PBS\centering \href{\#stringifier}{\texttt{ {\ttfamily stringifier}}}   &\PBS\centering {\ttfamily \{String\textbackslash{}$\vert$\+Function\}}   &\PBS\centering {\ttfamily undefined}   &Custom Post\+CSS Stringifier   \\\cline{1-4}
\end{longtabu}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21346}{}\doxyparagraph{$<$tt$>$\+Parser$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21346}
$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  test: /\(\backslash\).sss\$/,}
\DoxyCodeLine{  use: [}
\DoxyCodeLine{    ...,}
\DoxyCodeLine{    \{ loader: 'postcss-\/loader', options: \{ parser: 'sugarss' \} \}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21347}{}\doxyparagraph{$<$tt$>$\+Syntax$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21347}
$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  test: /\(\backslash\).css\$/,}
\DoxyCodeLine{  use: [}
\DoxyCodeLine{    ...,}
\DoxyCodeLine{    \{ loader: 'postcss-\/loader', options: \{ syntax: 'sugarss' \} \}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21348}{}\doxyparagraph{$<$tt$>$\+Stringifier$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21348}
$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  test: /\(\backslash\).css\$/,}
\DoxyCodeLine{  use: [}
\DoxyCodeLine{    ...,}
\DoxyCodeLine{    \{ loader: 'postcss-\/loader', options: \{ stringifier: 'midas' \} \}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21349}{}\doxysubsubsection{$<$tt$>$\+Source\+Map$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21349}
Enables source map support, {\ttfamily postcss-\/loader} will use the previous source map given by other loaders and update it accordingly, if no previous loader is applied before {\ttfamily postcss-\/loader}, the loader will generate a source map for you.

$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  test: /\(\backslash\).css/,}
\DoxyCodeLine{  use: [}
\DoxyCodeLine{    \{ loader: 'style-\/loader', options: \{ sourceMap: true \} \},}
\DoxyCodeLine{    \{ loader: 'css-\/loader', options: \{ sourceMap: true \} \},}
\DoxyCodeLine{    \{ loader: 'postcss-\/loader', options: \{ sourceMap: true \} \},}
\DoxyCodeLine{    \{ loader: 'sass-\/loader', options: \{ sourceMap: true \} \}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21350}{}\doxyparagraph{‘\textquotesingle{}inline’\`{}}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21350}
You can set the `source\+Map\+: \textquotesingle{}inline'\`{} option to inline the source map within the CSS directly as an annotation comment.

$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  loader: 'postcss-\/loader',}
\DoxyCodeLine{  options: \{}
\DoxyCodeLine{    sourceMap: 'inline'}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}



\begin{DoxyCode}{0}
\DoxyCodeLine{.class \{ color: red; \}}
\DoxyCodeLine{}
\DoxyCodeLine{/*\# sourceMappingURL=data:application/json;base64, ... */ }

\end{DoxyCode}


\doxysubsection*{Examples}\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21351}{}\doxysubsubsection{$<$tt$>$\+Stylelint$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21351}
$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  test: /\(\backslash\).css\$/,}
\DoxyCodeLine{  use: [}
\DoxyCodeLine{    'style-\/loader',}
\DoxyCodeLine{    'css-\/loader',}
\DoxyCodeLine{    \{}
\DoxyCodeLine{      loader: 'postcss-\/loader',}
\DoxyCodeLine{      options: \{}
\DoxyCodeLine{        ident: 'postcss',}
\DoxyCodeLine{        plugins: [}
\DoxyCodeLine{          require('postcss-\/import')(),}
\DoxyCodeLine{          require('stylelint')(),}
\DoxyCodeLine{          ...,}
\DoxyCodeLine{        ]}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    \}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21352}{}\doxysubsubsection{$<$tt$>$\+Autoprefixing$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21352}
$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  test: /\(\backslash\).css\$/,}
\DoxyCodeLine{  use: [}
\DoxyCodeLine{    'style-\/loader',}
\DoxyCodeLine{    'css-\/loader',}
\DoxyCodeLine{    \{}
\DoxyCodeLine{      loader: 'postcss-\/loader',}
\DoxyCodeLine{      options: \{}
\DoxyCodeLine{        ident: 'postcss',}
\DoxyCodeLine{        plugins: [}
\DoxyCodeLine{          require('autoprefixer')(\{...options\}),}
\DoxyCodeLine{          ...,}
\DoxyCodeLine{        ]}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    \}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}


\begin{quote}
\+:warning\+: \href{https://github.com/csstools/postcss-preset-env}{\texttt{ {\ttfamily postcss-\/preset-\/env}}} includes \href{https://github.com/postcss/autoprefixer}{\texttt{ {\ttfamily autoprefixer}}}, so adding it separately is not necessary if you already use the preset. \end{quote}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21353}{}\doxysubsubsection{$<$tt$>$\+CSS Modules$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21353}
This loader \href{https://github.com/webpack/css-loader/issues/137}{\texttt{ cannot be used}} with \href{https://github.com/webpack/css-loader\#css-modules}{\texttt{ CSS Modules}} out of the box due to the way {\ttfamily css-\/loader} processes file imports. To make them work properly, either add the css-\/loader’s \href{https://github.com/webpack-contrib/css-loader\#importloaders}{\texttt{ {\ttfamily import\+Loaders}}} option.

$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  test: /\(\backslash\).css\$/,}
\DoxyCodeLine{  use: [}
\DoxyCodeLine{    'style-\/loader',}
\DoxyCodeLine{    \{ loader: 'css-\/loader', options: \{ modules: true, importLoaders: 1 \} \},}
\DoxyCodeLine{    'postcss-\/loader'}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}


or use \href{https://github.com/css-modules/postcss-modules}{\texttt{ postcss-\/modules}} instead of {\ttfamily css-\/loader}.\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21354}{}\doxysubsubsection{$<$tt$>$\+CSS-\/in-\/\+JS$<$/tt$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21354}
If you want to process styles written in Java\+Script, use the \href{https://github.com/postcss/postcss-js}{\texttt{ postcss-\/js}} parser.

$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  test: /\(\backslash\).style.js\$/,}
\DoxyCodeLine{  use: [}
\DoxyCodeLine{    'style-\/loader',}
\DoxyCodeLine{    \{ loader: 'css-\/loader', options: \{ importLoaders: 2 \} \},}
\DoxyCodeLine{    \{ loader: 'postcss-\/loader', options: \{ parser: 'postcss-\/js' \} \},}
\DoxyCodeLine{    'babel-\/loader'}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}


As result you will be able to write styles in the following way


\begin{DoxyCode}{0}
\DoxyCodeLine{import colors from './styles/colors'}
\DoxyCodeLine{}
\DoxyCodeLine{export default \{}
\DoxyCodeLine{    '.menu': \{}
\DoxyCodeLine{      color: colors.main,}
\DoxyCodeLine{      height: 25,}
\DoxyCodeLine{      '\&\_link': \{}
\DoxyCodeLine{      color: 'white'}
\DoxyCodeLine{    \}}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


\begin{quote}
\+:warning\+: If you are using Babel you need to do the following in order for the setup to work \end{quote}
\begin{quote}
1. Add \href{https://github.com/59naga/babel-plugin-add-module-exports}{\texttt{ babel-\/plugin-\/add-\/module-\/exports}} to your configuration
\begin{DoxyEnumerate}
\item You need to have only one {\bfseries{default}} export per style module 
\end{DoxyEnumerate}\end{quote}
\hypertarget{md_sfcode_node_modules_postcss_loader_README_autotoc_md21355}{}\doxysubsubsection{$<$a href=\char`\"{}https\+://github.\+com/webpack-\/contrib/mini-\/css-\/extract-\/plugin\char`\"{}$>$\+Extract CSS$<$/a$>$}\label{md_sfcode_node_modules_postcss_loader_README_autotoc_md21355}
$\ast$$\ast${\ttfamily webpack.\+config.\+js}$\ast$$\ast$ 
\begin{DoxyCode}{0}
\DoxyCodeLine{const devMode = process.env.NODE\_ENV !== 'production'}
\DoxyCodeLine{}
\DoxyCodeLine{const MiniCssExtractPlugin = require('mini-\/css-\/extract-\/plugin')}
\DoxyCodeLine{}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          devMode ? 'style-\/loader' : MiniCssExtractPlugin.loader,}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          'postcss-\/loader'}
\DoxyCodeLine{        ]}
\DoxyCodeLine{      \}}
\DoxyCodeLine{    ]}
\DoxyCodeLine{  \},}
\DoxyCodeLine{  plugins: [}
\DoxyCodeLine{    new MiniCssExtractPlugin(\{}
\DoxyCodeLine{      filename: devMode ? '[name].css' : '[name].[hash].css'}
\DoxyCodeLine{    \})}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}


\doxysubsection*{Maintainers}

\tabulinesep=1mm
\begin{longtabu}spread 0pt [c]{*{0}{|X[-1]}|}
\hline
\end{longtabu}


\href{https://github.com/michael-ciniawsky}{\texttt{   Michael Ciniawsky }}  

\href{https://github.com/evilebottnawi}{\texttt{   Alexander Krasnoyarov }}   $<$tbody$>$ 