 \href{https://github.com/webpack/webpack}{\texttt{  }} \doxysection*{Style Loader}

 

\href{https://npmjs.com/package/style-loader}{\texttt{ }} \href{https://nodejs.org}{\texttt{ }} \href{https://david-dm.org/webpack-contrib/style-loader}{\texttt{ }} \href{https://github.com/webpack-contrib/style-loader/actions}{\texttt{ }} \href{https://codecov.io/gh/webpack-contrib/style-loader}{\texttt{ }} \href{https://gitter.im/webpack/webpack}{\texttt{ }} \href{https://packagephobia.now.sh/result?p=style-loader}{\texttt{ }}\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29222}{}\doxysection{style-\/loader}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29222}
Inject CSS into the DOM.\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29223}{}\doxysubsection{Getting Started}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29223}
To begin, you\textquotesingle{}ll need to install {\ttfamily style-\/loader}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{npm install -\/-\/save-\/dev style-\/loader }

\end{DoxyCode}


It\textquotesingle{}s recommended to combine {\ttfamily style-\/loader} with the \href{https://github.com/webpack-contrib/css-loader}{\texttt{ {\ttfamily css-\/loader}}}

Then add the loader to your {\ttfamily webpack} config. For example\+:

{\bfseries{style.\+css}}


\begin{DoxyCode}{0}
\DoxyCodeLine{body \{}
\DoxyCodeLine{  background: green;}
\DoxyCodeLine{\} }

\end{DoxyCode}


{\bfseries{component.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import './style.css'; }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: ['style-\/loader', 'css-\/loader'],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29224}{}\doxysubsection{Options}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29224}
\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{\#injecttype}{\texttt{ $\ast$$\ast${\ttfamily inject\+Type}$\ast$$\ast$}}   &\PBS\centering {\ttfamily \{String\}}   &\PBS\centering {\ttfamily style\+Tag}   &Allows to setup how styles will be injected into the DOM    \\\cline{1-4}
\PBS\centering \href{\#attributes}{\texttt{ $\ast$$\ast${\ttfamily attributes}$\ast$$\ast$}}   &\PBS\centering {\ttfamily \{Object\}}   &\PBS\centering {\ttfamily \{\}}   &Adds custom attributes to tag    \\\cline{1-4}
\PBS\centering \href{\#insert}{\texttt{ $\ast$$\ast${\ttfamily insert}$\ast$$\ast$}}   &\PBS\centering {\ttfamily \{String\textbackslash{}$\vert$\+Function\}}   &\PBS\centering {\ttfamily head}   &Inserts tag at the given position into the DOM    \\\cline{1-4}
\PBS\centering \href{\#base}{\texttt{ $\ast$$\ast${\ttfamily base}$\ast$$\ast$}}   &\PBS\centering {\ttfamily \{Number\}}   &\PBS\centering {\ttfamily true}   &Sets module ID base (DLLPlugin)    \\\cline{1-4}
\PBS\centering \href{\#esmodule}{\texttt{ $\ast$$\ast${\ttfamily es\+Module}$\ast$$\ast$}}   &\PBS\centering {\ttfamily \{Boolean\}}   &\PBS\centering {\ttfamily false}   &Use ES modules syntax   \\\cline{1-4}
\end{longtabu}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29225}{}\doxysubsubsection{$<$tt$>$inject\+Type$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29225}
Type\+: {\ttfamily String} Default\+: {\ttfamily style\+Tag}

Allows to setup how styles will be injected into the DOM.

Possible values\+:


\begin{DoxyItemize}
\item {\ttfamily style\+Tag}
\item {\ttfamily singleton\+Style\+Tag}
\item {\ttfamily lazy\+Style\+Tag}
\item {\ttfamily lazy\+Singleton\+Style\+Tag}
\item {\ttfamily link\+Tag}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29226}{}\doxyparagraph{$<$tt$>$style\+Tag$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29226}
Automatically injects styles into the DOM using multiple {\ttfamily $<$style$>$$<$/style$>$}. It is {\bfseries{default}} behaviour.

{\bfseries{component.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import './styles.css'; }

\end{DoxyCode}


Example with Locals (CSS Modules)\+:

{\bfseries{component-\/with-\/css-\/modules.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import styles from './styles.css';}
\DoxyCodeLine{}
\DoxyCodeLine{const divElement = document.createElement('div');}
\DoxyCodeLine{divElement.className = styles['my-\/class']; }

\end{DoxyCode}


All locals (class names) stored in imported object.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          // The `injectType`  option can be avoided because it is default behaviour}
\DoxyCodeLine{          \{ loader: 'style-\/loader', options: \{ injectType: 'styleTag' \} \},}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


The loader inject styles like\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{<style>}
\DoxyCodeLine{  .foo \{}
\DoxyCodeLine{    color: red;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{</style>}
\DoxyCodeLine{<style>}
\DoxyCodeLine{  .bar \{}
\DoxyCodeLine{    color: blue;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{</style> }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29227}{}\doxyparagraph{$<$tt$>$singleton\+Style\+Tag$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29227}
Automatically injects styles into the DOM using one {\ttfamily $<$style$>$$<$/style$>$}.

\begin{quote}
⚠ Source maps do not work. \end{quote}
{\bfseries{component.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import './styles.css'; }

\end{DoxyCode}


{\bfseries{component-\/with-\/css-\/modules.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import styles from './styles.css';}
\DoxyCodeLine{}
\DoxyCodeLine{const divElement = document.createElement('div');}
\DoxyCodeLine{divElement.className = styles['my-\/class']; }

\end{DoxyCode}


All locals (class names) stored in imported object.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'style-\/loader',}
\DoxyCodeLine{            options: \{ injectType: 'singletonStyleTag' \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


The loader inject styles like\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{<style>}
\DoxyCodeLine{  .foo \{}
\DoxyCodeLine{    color: red;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{  .bar \{}
\DoxyCodeLine{    color: blue;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{</style> }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29228}{}\doxyparagraph{$<$tt$>$lazy\+Style\+Tag$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29228}
Injects styles into the DOM using multiple {\ttfamily $<$style$>$$<$/style$>$} on demand. We recommend following {\ttfamily .lazy.\+css} naming convention for lazy styles and the {\ttfamily .css} for basic {\ttfamily style-\/loader} usage (similar to other file types, i.\+e. {\ttfamily .lazy.\+less} and {\ttfamily .less}). When you {\ttfamily lazy\+Style\+Tag} value the {\ttfamily style-\/loader} injects the styles lazily making them useable on-\/demand via {\ttfamily style.\+use()} / {\ttfamily style.\+unuse()}.

\begin{quote}
⚠️ Behavior is undefined when {\ttfamily unuse} is called more often than {\ttfamily use}. Don\textquotesingle{}t do that. \end{quote}
{\bfseries{component.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import styles from './styles.lazy.css';}
\DoxyCodeLine{}
\DoxyCodeLine{styles.use();}
\DoxyCodeLine{// For removing styles you can use}
\DoxyCodeLine{// styles.unuse(); }

\end{DoxyCode}


{\bfseries{component-\/with-\/css-\/modules.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import styles from './styles.lazy.css';}
\DoxyCodeLine{}
\DoxyCodeLine{styles.use();}
\DoxyCodeLine{}
\DoxyCodeLine{const divElement = document.createElement('div');}
\DoxyCodeLine{divElement.className = styles.locals['my-\/class']; }

\end{DoxyCode}


All locals (class names) stored in {\ttfamily locals} property of imported object.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        exclude: /\(\backslash\).lazy\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: ['style-\/loader', 'css-\/loader'],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).lazy\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{ loader: 'style-\/loader', options: \{ injectType: 'lazyStyleTag' \} \},}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


The loader inject styles like\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{<style>}
\DoxyCodeLine{  .foo \{}
\DoxyCodeLine{    color: red;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{</style>}
\DoxyCodeLine{<style>}
\DoxyCodeLine{  .bar \{}
\DoxyCodeLine{    color: blue;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{</style> }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29229}{}\doxyparagraph{$<$tt$>$lazy\+Singleton\+Style\+Tag$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29229}
Injects styles into the DOM using one {\ttfamily $<$style$>$$<$/style$>$} on demand. We recommend following {\ttfamily .lazy.\+css} naming convention for lazy styles and the {\ttfamily .css} for basic {\ttfamily style-\/loader} usage (similar to other file types, i.\+e. {\ttfamily .lazy.\+less} and {\ttfamily .less}). When you {\ttfamily lazy\+Singleton\+Style\+Tag} value the {\ttfamily style-\/loader} injects the styles lazily making them useable on-\/demand via {\ttfamily style.\+use()} / {\ttfamily style.\+unuse()}.

\begin{quote}
⚠️ Source maps do not work. \end{quote}
\begin{quote}
⚠️ Behavior is undefined when {\ttfamily unuse} is called more often than {\ttfamily use}. Don\textquotesingle{}t do that. \end{quote}
{\bfseries{component.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import styles from './styles.css';}
\DoxyCodeLine{}
\DoxyCodeLine{styles.use();}
\DoxyCodeLine{// For removing styles you can use}
\DoxyCodeLine{// styles.unuse(); }

\end{DoxyCode}


{\bfseries{component-\/with-\/css-\/modules.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import styles from './styles.lazy.css';}
\DoxyCodeLine{}
\DoxyCodeLine{styles.use();}
\DoxyCodeLine{}
\DoxyCodeLine{const divElement = document.createElement('div');}
\DoxyCodeLine{divElement.className = styles.locals['my-\/class']; }

\end{DoxyCode}


All locals (class names) stored in {\ttfamily locals} property of imported object.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        exclude: /\(\backslash\).lazy\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: ['style-\/loader', 'css-\/loader'],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).lazy\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'style-\/loader',}
\DoxyCodeLine{            options: \{ injectType: 'lazySingletonStyleTag' \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


The loader generate this\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{<style>}
\DoxyCodeLine{  .foo \{}
\DoxyCodeLine{    color: red;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{  .bar \{}
\DoxyCodeLine{    color: blue;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{</style> }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29230}{}\doxyparagraph{$<$tt$>$link\+Tag$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29230}
Injects styles into the DOM using multiple {\ttfamily $<$link rel=\char`\"{}stylesheet\char`\"{} href=\char`\"{}path/to/file.\+css\char`\"{}$>$} .

\begin{quote}
ℹ️ The loader will dynamically insert the {\ttfamily $<$link href=\char`\"{}path/to/file.\+css\char`\"{} rel=\char`\"{}stylesheet\char`\"{}$>$} tag at runtime via Java\+Script. You should use \href{https://webpack.js.org/plugins/mini-css-extract-plugin/}{\texttt{ Mini\+Css\+Extract\+Plugin}} if you want to include a static {\ttfamily $<$link href=\char`\"{}path/to/file.\+css\char`\"{} rel=\char`\"{}stylesheet\char`\"{}$>$}. \end{quote}

\begin{DoxyCode}{0}
\DoxyCodeLine{import './styles.css';}
\DoxyCodeLine{import './other-\/styles.css'; }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).link\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{ loader: 'style-\/loader', options: \{ injectType: 'linkTag' \} \},}
\DoxyCodeLine{          \{ loader: 'file-\/loader' \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


The loader generate this\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{<link rel="{}stylesheet"{} href="{}path/to/style.css"{} />}
\DoxyCodeLine{<link rel="{}stylesheet"{} href="{}path/to/other-\/styles.css"{} /> }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29231}{}\doxysubsubsection{$<$tt$>$attributes$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29231}
Type\+: {\ttfamily Object} Default\+: {\ttfamily \{\}}

If defined, the {\ttfamily style-\/loader} will attach given attributes with their values on {\ttfamily $<$style$>$} / {\ttfamily $<$link$>$} element.

{\bfseries{component.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import style from './file.css'; }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{ loader: 'style-\/loader', options: \{ attributes: \{ id: 'id' \} \} \},}
\DoxyCodeLine{          \{ loader: 'css-\/loader' \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}



\begin{DoxyCode}{0}
\DoxyCodeLine{<style id="{}id"{}></style> }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29232}{}\doxysubsubsection{$<$tt$>$insert$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29232}
Type\+: {\ttfamily String$\vert$\+Function} Default\+: {\ttfamily head}

By default, the {\ttfamily style-\/loader} appends {\ttfamily $<$style$>$}/{\ttfamily $<$link$>$} elements to the end of the style target, which is the {\ttfamily $<$head$>$} tag of the page unless specified by {\ttfamily insert}. This will cause CSS created by the loader to take priority over CSS already present in the target. You can use other values if the standard behavior is not suitable for you, but we do not recommend doing this. If you target an \href{https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement}{\texttt{ iframe}} make sure you have sufficient access rights, the styles will be injected into the content document head.\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29233}{}\doxyparagraph{$<$tt$>$\+String$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29233}
Allows to setup custom \href{https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector}{\texttt{ query selector}} where styles inject into the DOM.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'style-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              insert: 'body',}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


A new {\ttfamily $<$style$>$}/{\ttfamily $<$link$>$} elements will be inserted into at bottom of {\ttfamily body} tag.\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29234}{}\doxyparagraph{$<$tt$>$\+Function$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29234}
Allows to override default behavior and insert styles at any position.

\begin{quote}
⚠ Do not forget that this code will be used in the browser and not all browsers support latest ECMA features like {\ttfamily let}, {\ttfamily const}, {\ttfamily arrow function expression} and etc, we recommend use only ECMA 5 features, but it is depends what browsers you want to support ⚠ Do not forget that some DOM methods may not be available in older browsers, we recommended use only \href{https://caniuse.com/\#search=DOM\%20Core}{\texttt{ DOM core level 2 properties}}, but it is depends what browsers you want to support \end{quote}
{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'style-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              insert: function insertAtTop(element) \{}
\DoxyCodeLine{                var parent = document.querySelector('head');}
\DoxyCodeLine{                // eslint-\/disable-\/next-\/line no-\/underscore-\/dangle}
\DoxyCodeLine{                var lastInsertedElement =}
\DoxyCodeLine{                  window.\_lastElementInsertedByStyleLoader;}
\DoxyCodeLine{}
\DoxyCodeLine{                if (!lastInsertedElement) \{}
\DoxyCodeLine{                  parent.insertBefore(element, parent.firstChild);}
\DoxyCodeLine{                \} else if (lastInsertedElement.nextSibling) \{}
\DoxyCodeLine{                  parent.insertBefore(element, lastInsertedElement.nextSibling);}
\DoxyCodeLine{                \} else \{}
\DoxyCodeLine{                  parent.appendChild(element);}
\DoxyCodeLine{                \}}
\DoxyCodeLine{}
\DoxyCodeLine{                // eslint-\/disable-\/next-\/line no-\/underscore-\/dangle}
\DoxyCodeLine{                window.\_lastElementInsertedByStyleLoader = element;}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


Insert styles at top of {\ttfamily head} tag.\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29235}{}\doxysubsubsection{$<$tt$>$base$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29235}
This setting is primarily used as a workaround for \href{https://github.com/webpack-contrib/style-loader/issues/163}{\texttt{ css clashes}} when using one or more \href{https://robertknight.github.io/posts/webpack-dll-plugins/}{\texttt{ Dll\+Plugin}}\textquotesingle{}s. {\ttfamily base} allows you to prevent either the {\itshape app}\textquotesingle{}s css (or {\itshape Dll\+Plugin2}\textquotesingle{}s css) from overwriting {\itshape Dll\+Plugin1}\textquotesingle{}s css by specifying a css module id base which is greater than the range used by {\itshape Dll\+Plugin1} e.\+g.\+:

{\bfseries{webpack.\+dll1.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: ['style-\/loader', 'css-\/loader'],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


{\bfseries{webpack.\+dll2.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{ loader: 'style-\/loader', options: \{ base: 1000 \} \},}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


{\bfseries{webpack.\+app.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{ loader: 'style-\/loader', options: \{ base: 2000 \} \},}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29236}{}\doxysubsubsection{$<$tt$>$es\+Module$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29236}
Type\+: {\ttfamily Boolean} Default\+: {\ttfamily false}

By default, {\ttfamily style-\/loader} generates JS modules that use the Common\+JS modules syntax. There are some cases in which using ES modules is beneficial, like in the case of \href{https://webpack.js.org/plugins/module-concatenation-plugin/}{\texttt{ module concatenation}} and \href{https://webpack.js.org/guides/tree-shaking/}{\texttt{ tree shaking}}.

You can enable a ES module syntax using\+:

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        loader: 'css-\/loader',}
\DoxyCodeLine{        options: \{}
\DoxyCodeLine{          esModule: true,}
\DoxyCodeLine{        \},}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29237}{}\doxysubsection{Examples}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29237}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29238}{}\doxysubsubsection{Source maps}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29238}
The loader automatically inject source maps when previous loader emit them. Therefore, to generate source maps, set the {\ttfamily source\+Map} option to {\ttfamily true} for the previous loader.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          \{ loader: 'css-\/loader', options: \{ sourceMap: true \} \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29239}{}\doxysubsubsection{Nonce}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29239}
There are two ways to work with {\ttfamily nonce}\+:


\begin{DoxyItemize}
\item using the {\ttfamily attributes} option
\item using the {\ttfamily \+\_\+\+\_\+webpack\+\_\+nonce\+\_\+\+\_\+} variable
\end{DoxyItemize}

\begin{quote}
⚠ the {\ttfamily attributes} option takes precedence over the {\ttfamily \+\_\+\+\_\+webpack\+\_\+nonce\+\_\+\+\_\+} variable \end{quote}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29240}{}\doxyparagraph{$<$tt$>$attributes$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29240}
{\bfseries{component.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import './style.css'; }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'style-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              attributes: \{}
\DoxyCodeLine{                nonce: '12345678',}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


The loader generate\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{<style nonce="{}12345678"{}>}
\DoxyCodeLine{  .foo \{}
\DoxyCodeLine{    color: red;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{</style> }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29241}{}\doxyparagraph{$<$tt$>$\+\_\+\+\_\+webpack\+\_\+nonce\+\_\+\+\_\+$<$/tt$>$}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29241}
{\bfseries{create-\/nonce.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{\_\_webpack\_nonce\_\_ = '12345678'; }

\end{DoxyCode}


{\bfseries{component.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import './create-\/nonce.js';}
\DoxyCodeLine{import './style.css'; }

\end{DoxyCode}


Alternative example for {\ttfamily require}\+:

{\bfseries{component.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{\_\_webpack\_nonce\_\_ = '12345678';}
\DoxyCodeLine{}
\DoxyCodeLine{require('./style.css'); }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: ['style-\/loader', 'css-\/loader'],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


The loader generate\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{<style nonce="{}12345678"{}>}
\DoxyCodeLine{  .foo \{}
\DoxyCodeLine{    color: red;}
\DoxyCodeLine{  \}}
\DoxyCodeLine{</style> }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29242}{}\doxyparagraph{Insert styles at top}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29242}
Inserts styles at top of {\ttfamily head} tag.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'style-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              insert: function insertAtTop(element) \{}
\DoxyCodeLine{                var parent = document.querySelector('head');}
\DoxyCodeLine{                var lastInsertedElement =}
\DoxyCodeLine{                  window.\_lastElementInsertedByStyleLoader;}
\DoxyCodeLine{}
\DoxyCodeLine{                if (!lastInsertedElement) \{}
\DoxyCodeLine{                  parent.insertBefore(element, parent.firstChild);}
\DoxyCodeLine{                \} else if (lastInsertedElement.nextSibling) \{}
\DoxyCodeLine{                  parent.insertBefore(element, lastInsertedElement.nextSibling);}
\DoxyCodeLine{                \} else \{}
\DoxyCodeLine{                  parent.appendChild(element);}
\DoxyCodeLine{                \}}
\DoxyCodeLine{}
\DoxyCodeLine{                window.\_lastElementInsertedByStyleLoader = element;}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29243}{}\doxyparagraph{Insert styles before target element}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29243}
Inserts styles before {\ttfamily \#id} element.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'style-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              insert: function insertBeforeAt(element) \{}
\DoxyCodeLine{                const parent = document.querySelector('head');}
\DoxyCodeLine{                const target = document.querySelector('\#id');}
\DoxyCodeLine{}
\DoxyCodeLine{                const lastInsertedElement =}
\DoxyCodeLine{                  window.\_lastElementInsertedByStyleLoader;}
\DoxyCodeLine{}
\DoxyCodeLine{                if (!lastInsertedElement) \{}
\DoxyCodeLine{                  parent.insertBefore(element, target);}
\DoxyCodeLine{                \} else if (lastInsertedElement.nextSibling) \{}
\DoxyCodeLine{                  parent.insertBefore(element, lastInsertedElement.nextSibling);}
\DoxyCodeLine{                \} else \{}
\DoxyCodeLine{                  parent.appendChild(element);}
\DoxyCodeLine{                \}}
\DoxyCodeLine{}
\DoxyCodeLine{                window.\_lastElementInsertedByStyleLoader = element;}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29244}{}\doxysubsection{Contributing}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29244}
Please take a moment to read our contributing guidelines if you haven\textquotesingle{}t yet done so.

./.github/\+CONTRIBUTING.\+md \char`\"{}\+CONTRIBUTING\char`\"{}\hypertarget{md_sfcode_node_modules_style_loader_README_autotoc_md29245}{}\doxysubsection{License}\label{md_sfcode_node_modules_style_loader_README_autotoc_md29245}
\href{./LICENSE}{\texttt{ MIT}} 