  \href{https://github.com/webpack/webpack}{\texttt{  }} 

\href{https://npmjs.com/package/sass-loader}{\texttt{ }} \href{https://nodejs.org}{\texttt{ }} \href{https://david-dm.org/webpack-contrib/sass-loader}{\texttt{ }} \href{https://github.com/webpack-contrib/sass-loader/actions}{\texttt{ }} \href{https://codecov.io/gh/webpack-contrib/sass-loader}{\texttt{ }} \href{https://gitter.im/webpack/webpack}{\texttt{ }} \href{https://packagephobia.now.sh/result?p=sass-loader}{\texttt{ }}\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26221}{}\doxysection{sass-\/loader}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26221}
Loads a Sass/\+SCSS file and compiles it to CSS.\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26222}{}\doxysubsection{Getting Started}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26222}
To begin, you\textquotesingle{}ll need to install {\ttfamily sass-\/loader}\+:


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

\end{DoxyCode}


{\ttfamily sass-\/loader} requires you to install either \href{https://github.com/sass/dart-sass}{\texttt{ Dart Sass}} or \href{https://github.com/sass/node-sass}{\texttt{ Node Sass}} on your own (more documentation can be found below).

This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.

\begin{quote}
ℹ️ We recommend using \href{https://github.com/sass/dart-sass}{\texttt{ Dart Sass}}. \end{quote}
\begin{quote}
⚠ \href{https://github.com/sass/node-sass}{\texttt{ Node Sass}} does not work with \href{https://classic.yarnpkg.com/en/docs/pnp/}{\texttt{ Yarn PnP}} feature. \end{quote}
Chain the {\ttfamily sass-\/loader} with the \href{https://github.com/webpack-contrib/css-loader}{\texttt{ css-\/loader}} and the \href{https://github.com/webpack-contrib/style-loader}{\texttt{ style-\/loader}} to immediately apply all styles to the DOM or the \href{https://github.com/webpack-contrib/mini-css-extract-plugin}{\texttt{ mini-\/css-\/extract-\/plugin}} to extract it into a separate file.

Then add the loader to your Webpack configuration. For example\+:

{\bfseries{app.\+js}}


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

\end{DoxyCode}


{\bfseries{style.\+scss}}


\begin{DoxyCode}{0}
\DoxyCodeLine{\$body-\/color: red;}
\DoxyCodeLine{}
\DoxyCodeLine{body \{}
\DoxyCodeLine{  color: \$body-\/color;}
\DoxyCodeLine{\} }

\end{DoxyCode}


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


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).s[ac]ss\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          // Creates `style` nodes from JS strings}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          // Translates CSS into CommonJS}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          // Compiles Sass to CSS}
\DoxyCodeLine{          'sass-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


Finally run {\ttfamily webpack} via your preferred method.\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26223}{}\doxysubsubsection{Resolving $<$tt$>$import$<$/tt$>$ at-\/rules}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26223}
Webpack provides an \href{https://webpack.js.org/concepts/module-resolution/}{\texttt{ advanced mechanism to resolve files}}.

The {\ttfamily sass-\/loader} uses Sass\textquotesingle{}s custom importer feature to pass all queries to the Webpack resolving engine. Thus you can import your Sass modules from {\ttfamily node\+\_\+modules}. Just prepend them with a {\ttfamily $\sim$} to tell Webpack that this is not a relative import\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{@import '\string~bootstrap'; }

\end{DoxyCode}


It\textquotesingle{}s important to only prepend it with {\ttfamily $\sim$}, because {\ttfamily $\sim$/} resolves to the home directory. Webpack needs to distinguish between {\ttfamily bootstrap} and {\ttfamily $\sim$bootstrap} because CSS and Sass files have no special syntax for importing relative files. Writing {\ttfamily @import \char`\"{}style.\+scss\char`\"{}} is the same as {\ttfamily @import \char`\"{}./style.\+scss\char`\"{};}\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26224}{}\doxysubsubsection{Problems with $<$tt$>$url(...)$<$/tt$>$}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26224}
Since Sass implementations don\textquotesingle{}t provide \href{https://github.com/sass/libsass/issues/532}{\texttt{ url rewriting}}, all linked assets must be relative to the output.


\begin{DoxyItemize}
\item If you pass the generated CSS on to the {\ttfamily css-\/loader}, all urls must be relative to the entry-\/file (e.\+g. {\ttfamily main.\+scss}).
\item If you\textquotesingle{}re just generating CSS without passing it to the {\ttfamily css-\/loader}, it must be relative to your web root.
\end{DoxyItemize}

You will be disrupted by this first issue. It is natural to expect relative references to be resolved against the {\ttfamily .sass}/{\ttfamily .scss} file in which they are specified (like in regular {\ttfamily .css} files).

Thankfully there are a two solutions to this problem\+:


\begin{DoxyItemize}
\item Add the missing url rewriting using the \href{https://github.com/bholloway/resolve-url-loader}{\texttt{ resolve-\/url-\/loader}}. Place it before {\ttfamily sass-\/loader} in the loader chain.
\item Library authors usually provide a variable to modify the asset path. \href{https://github.com/twbs/bootstrap-sass}{\texttt{ bootstrap-\/sass}} for example has an {\ttfamily \$icon-\/font-\/path}.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26225}{}\doxysubsection{Options}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26225}
\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 $\ast$$\ast$\href{\#implementation}{\texttt{ {\ttfamily implementation}}}$\ast$$\ast$   &\PBS\centering {\ttfamily \{Object\}}   &\PBS\centering {\ttfamily sass}   &Setup Sass implementation to use.    \\\cline{1-4}
\PBS\centering $\ast$$\ast$\href{\#sassoptions}{\texttt{ {\ttfamily sass\+Options}}}$\ast$$\ast$   &\PBS\centering {\ttfamily \{Object\textbackslash{}$\vert$\+Function\}}   &\PBS\centering defaults values for Sass implementation   &Options for Sass.    \\\cline{1-4}
\PBS\centering $\ast$$\ast$\href{\#sourcemap}{\texttt{ {\ttfamily source\+Map}}}$\ast$$\ast$   &\PBS\centering {\ttfamily \{Boolean\}}   &\PBS\centering {\ttfamily compiler.\+devtool}   &Enables/\+Disables generation of source maps.    \\\cline{1-4}
\PBS\centering $\ast$$\ast$\href{\#additionaldata}{\texttt{ {\ttfamily additional\+Data}}}$\ast$$\ast$   &\PBS\centering {\ttfamily \{String\textbackslash{}$\vert$\+Function\}}   &\PBS\centering {\ttfamily undefined}   &Prepends/\+Appends {\ttfamily Sass}/{\ttfamily SCSS} code before the actual entry file.    \\\cline{1-4}
\PBS\centering $\ast$$\ast$\href{\#webpackimporter}{\texttt{ {\ttfamily webpack\+Importer}}}$\ast$$\ast$   &\PBS\centering {\ttfamily \{Boolean\}}   &\PBS\centering {\ttfamily true}   &Enables/\+Disables the default Webpack importer.   \\\cline{1-4}
\end{longtabu}
\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26226}{}\doxysubsubsection{$<$tt$>$implementation$<$/tt$>$}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26226}
Type\+: {\ttfamily Object} Default\+: {\ttfamily sass}

The special {\ttfamily implementation} option determines which implementation of Sass to use.

By default the loader resolve the implementation based on your dependencies. Just add required implementation to {\ttfamily package.\+json} ({\ttfamily sass} or {\ttfamily node-\/sass} package) and install dependencies.

Example where the {\ttfamily sass-\/loader} loader uses the {\ttfamily sass} ({\ttfamily dart-\/sass}) implementation\+:

{\bfseries{package.\+json}}


\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  "{}devDependencies"{}: \{}
\DoxyCodeLine{    "{}sass-\/loader"{}: "{}\string^7.2.0"{},}
\DoxyCodeLine{    "{}sass"{}: "{}\string^1.22.10"{}}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


Example where the {\ttfamily sass-\/loader} loader uses the {\ttfamily node-\/sass} implementation\+:

{\bfseries{package.\+json}}


\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  "{}devDependencies"{}: \{}
\DoxyCodeLine{    "{}sass-\/loader"{}: "{}\string^7.2.0"{},}
\DoxyCodeLine{    "{}node-\/sass"{}: "{}\string^4.0.0"{}}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


Beware the situation when {\ttfamily node-\/sass} and {\ttfamily sass} were installed! By default the {\ttfamily sass-\/loader} prefers {\ttfamily sass}. In order to avoid this situation you can use the {\ttfamily implementation} option.

The {\ttfamily implementation} options either accepts {\ttfamily sass} ({\ttfamily Dart Sass}) or {\ttfamily node-\/sass} as a module.

For example, to use Dart Sass, you\textquotesingle{}d pass\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).s[ac]ss\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'sass-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              // Prefer `dart-\/sass`}
\DoxyCodeLine{              implementation: require('sass'),}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


Note that when using {\ttfamily sass} ({\ttfamily Dart Sass}), {\bfseries{synchronous compilation is twice as fast as asynchronous compilation}} by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the \href{https://www.npmjs.com/package/fibers}{\texttt{ fibers}} package to call asynchronous importers from the synchronous code path.

We automatically inject the \href{https://github.com/laverdet/node-fibers}{\texttt{ {\ttfamily fibers}}} package (setup {\ttfamily sass\+Options.\+fiber}) if is possible (i.\+e. you need install the \href{https://github.com/laverdet/node-fibers}{\texttt{ {\ttfamily fibers}}} package).

{\bfseries{package.\+json}}


\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{  "{}devDependencies"{}: \{}
\DoxyCodeLine{    "{}sass-\/loader"{}: "{}\string^7.2.0"{},}
\DoxyCodeLine{    "{}sass"{}: "{}\string^1.22.10"{},}
\DoxyCodeLine{    "{}fibers"{}: "{}\string^4.0.1"{}}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


You can disable automatically injecting the \href{https://github.com/laverdet/node-fibers}{\texttt{ {\ttfamily fibers}}} package by passing a {\ttfamily false} value for the {\ttfamily sass\+Options.\+fiber} option.

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


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).s[ac]ss\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'sass-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              implementation: require('sass'),}
\DoxyCodeLine{              sassOptions: \{}
\DoxyCodeLine{                fiber: false,}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


You can also pass the {\ttfamily fiber} value using this code\+:

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


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).s[ac]ss\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'sass-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              implementation: require('sass'),}
\DoxyCodeLine{              sassOptions: \{}
\DoxyCodeLine{                fiber: require('fibers'),}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26227}{}\doxysubsubsection{$<$tt$>$sass\+Options$<$/tt$>$}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26227}
Type\+: {\ttfamily Object$\vert$\+Function} Default\+: defaults values for Sass implementation

Options for \href{http://sass-lang.com/dart-sass}{\texttt{ Dart Sass}} or \href{https://github.com/sass/node-sass}{\texttt{ Node Sass}} implementation.

\begin{quote}
ℹ️ The {\ttfamily indented\+Syntax} option has {\ttfamily true} value for the {\ttfamily sass} extension. \end{quote}
\begin{quote}
ℹ️ Options such as {\ttfamily data} and {\ttfamily file} are unavailable and will be ignored. \end{quote}
\begin{quote}
ℹ We recommend not to set the {\ttfamily out\+File}, {\ttfamily source\+Map\+Contents}, {\ttfamily source\+Map\+Embed}, {\ttfamily source\+Map\+Root} options because {\ttfamily sass-\/loader} automatically sets these options when the {\ttfamily source\+Map} option is {\ttfamily true}. \end{quote}
\begin{quote}
ℹ️ Access to the \href{https://webpack.js.org/api/loaders/\#the-loader-context}{\texttt{ loader context}} inside the custom importer can be done using the {\ttfamily this.\+webpack\+Loader\+Context} property. \end{quote}
There is a slight difference between the {\ttfamily sass} ({\ttfamily dart-\/sass}) and {\ttfamily node-\/sass} options.

Please consult documentation before using them\+:


\begin{DoxyItemize}
\item \href{https://github.com/sass/dart-sass\#javascript-api}{\texttt{ Dart Sass documentation}} for all available {\ttfamily sass} options.
\item \href{https://github.com/sass/node-sass/\#options}{\texttt{ Node Sass documentation}} for all available {\ttfamily node-\/sass} options.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26228}{}\doxyparagraph{$<$tt$>$\+Object$<$/tt$>$}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26228}
Use and object for the Sass implementation setup.

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


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).s[ac]ss\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'sass-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              sassOptions: \{}
\DoxyCodeLine{                indentWidth: 4,}
\DoxyCodeLine{                includePaths: ['absolute/path/a', 'absolute/path/b'],}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26229}{}\doxyparagraph{$<$tt$>$\+Function$<$/tt$>$}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26229}
Allows to setup the Sass implementation by setting different options based on the loader context.


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).s[ac]ss\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'sass-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              sassOptions: (loaderContext) => \{}
\DoxyCodeLine{                // More information about available properties https://webpack.js.org/api/loaders/}
\DoxyCodeLine{                const \{ resourcePath, rootContext \} = loaderContext;}
\DoxyCodeLine{                const relativePath = path.relative(rootContext, resourcePath);}
\DoxyCodeLine{}
\DoxyCodeLine{                if (relativePath === 'styles/foo.scss') \{}
\DoxyCodeLine{                  return \{}
\DoxyCodeLine{                    includePaths: ['absolute/path/c', 'absolute/path/d'],}
\DoxyCodeLine{                  \};}
\DoxyCodeLine{                \}}
\DoxyCodeLine{}
\DoxyCodeLine{                return \{}
\DoxyCodeLine{                  includePaths: ['absolute/path/a', 'absolute/path/b'],}
\DoxyCodeLine{                \};}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26230}{}\doxysubsubsection{$<$tt$>$source\+Map$<$/tt$>$}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26230}
Type\+: {\ttfamily Boolean} Default\+: depends on the {\ttfamily compiler.\+devtool} value

Enables/\+Disables generation of source maps.

By default generation of source maps depends on the \href{https://webpack.js.org/configuration/devtool/}{\texttt{ {\ttfamily devtool}}} option. All values enable source map generation except {\ttfamily eval} and {\ttfamily false} value.

\begin{quote}
ℹ If a {\ttfamily true} the {\ttfamily source\+Map}, {\ttfamily source\+Map\+Root}, {\ttfamily source\+Map\+Embed}, {\ttfamily source\+Map\+Contents} and {\ttfamily omit\+Source\+Map\+Url} from {\ttfamily sass\+Options} will be ignored. \end{quote}
{\bfseries{webpack.\+config.\+js}}


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

\end{DoxyCode}


\begin{quote}
ℹ In some rare cases {\ttfamily node-\/sass} can output invalid source maps (it is a {\ttfamily node-\/sass} bug). \end{quote}
\begin{quote}
\begin{quote}
In order to avoid this, you can try to update {\ttfamily node-\/sass} to latest version or you can try to set within {\ttfamily sass\+Options} the {\ttfamily output\+Style} option to {\ttfamily compressed}. \end{quote}
\end{quote}
{\bfseries{webpack.\+config.\+js}}


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

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26231}{}\doxysubsubsection{$<$tt$>$additional\+Data$<$/tt$>$}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26231}
Type\+: {\ttfamily String$\vert$\+Function} Default\+: {\ttfamily undefined}

Prepends {\ttfamily Sass}/{\ttfamily SCSS} code before the actual entry file. In this case, the {\ttfamily sass-\/loader} will not override the {\ttfamily data} option but just {\bfseries{prepend}} the entry\textquotesingle{}s content.

This is especially useful when some of your Sass variables depend on the environment\+:\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26232}{}\doxyparagraph{$<$tt$>$\+String$<$/tt$>$}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26232}

\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).s[ac]ss\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'sass-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              additionalData: '\$env: ' + process.env.NODE\_ENV + ';',}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26233}{}\doxyparagraph{$<$tt$>$\+Function$<$/tt$>$}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26233}

\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).s[ac]ss\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'sass-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              additionalData: (content, loaderContext) => \{}
\DoxyCodeLine{                // More information about available properties https://webpack.js.org/api/loaders/}
\DoxyCodeLine{                const \{ resourcePath, rootContext \} = loaderContext;}
\DoxyCodeLine{                const relativePath = path.relative(rootContext, resourcePath);}
\DoxyCodeLine{}
\DoxyCodeLine{                if (relativePath === 'styles/foo.scss') \{}
\DoxyCodeLine{                  return '\$value: 100px;' + content;}
\DoxyCodeLine{                \}}
\DoxyCodeLine{}
\DoxyCodeLine{                return '\$value: 200px;' + content;}
\DoxyCodeLine{              \},}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26234}{}\doxysubsubsection{$<$tt$>$webpack\+Importer$<$/tt$>$}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26234}
Type\+: {\ttfamily Boolean} Default\+: {\ttfamily true}

Enables/\+Disables the default Webpack importer.

This can improve performance in some cases. Use it with caution because aliases and {\ttfamily @import} at-\/rules starting with {\ttfamily $\sim$} will not work. You can pass own {\ttfamily importer} to solve this (see \href{https://github.com/sass/node-sass\#importer--v200---experimental}{\texttt{ {\ttfamily importer docs}}}).

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


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

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26235}{}\doxysubsection{Examples}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26235}
\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26236}{}\doxysubsubsection{Extracts CSS into separate files}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26236}
For production builds it\textquotesingle{}s recommended to extract the CSS from your bundle being able to use parallel loading of CSS/\+JS resources later on.

There are two possibilities to extract a style sheet from the bundle\+:


\begin{DoxyItemize}
\item \href{https://github.com/webpack-contrib/mini-css-extract-plugin}{\texttt{ mini-\/css-\/extract-\/plugin}} (use this, when using webpack 4 configuration. Works in all use-\/cases)
\item \href{https://github.com/peerigon/extract-loader}{\texttt{ extract-\/loader}} (simpler, but specialized on the css-\/loader\textquotesingle{}s output)
\end{DoxyItemize}

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


\begin{DoxyCode}{0}
\DoxyCodeLine{const MiniCssExtractPlugin = require('mini-\/css-\/extract-\/plugin');}
\DoxyCodeLine{}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).s[ac]ss\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          // fallback to style-\/loader in development}
\DoxyCodeLine{          process.env.NODE\_ENV !== 'production'}
\DoxyCodeLine{            ? 'style-\/loader'}
\DoxyCodeLine{            : MiniCssExtractPlugin.loader,}
\DoxyCodeLine{          'css-\/loader',}
\DoxyCodeLine{          'sass-\/loader',}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{  plugins: [}
\DoxyCodeLine{    new MiniCssExtractPlugin(\{}
\DoxyCodeLine{      // Options similar to the same options in webpackOptions.output}
\DoxyCodeLine{      // both options are optional}
\DoxyCodeLine{      filename: '[name].css',}
\DoxyCodeLine{      chunkFilename: '[id].css',}
\DoxyCodeLine{    \}),}
\DoxyCodeLine{  ],}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26237}{}\doxysubsubsection{Source maps}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26237}
Enables/\+Disables generation of source maps.

To enable CSS source maps, you\textquotesingle{}ll need to pass the {\ttfamily source\+Map} option to the {\ttfamily sass-\/loader} {\itshape and} the css-\/loader.

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


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  devtool: 'source-\/map', // any "{}source-\/map"{}-\/like devtool is possible}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).s[ac]ss\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          'style-\/loader',}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'css-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              sourceMap: true,}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'sass-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              sourceMap: true,}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


If you want to edit the original Sass files inside Chrome, \href{https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0}{\texttt{ there\textquotesingle{}s a good blog post}}. Checkout \href{https://github.com/webpack-contrib/sass-loader/tree/master/test}{\texttt{ test/source\+Map}} for a running example.\hypertarget{md_sfcode_node_modules_sass_loader_README_autotoc_md26238}{}\doxysubsection{Contributing}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26238}
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_sass_loader_README_autotoc_md26239}{}\doxysubsection{License}\label{md_sfcode_node_modules_sass_loader_README_autotoc_md26239}
\href{./LICENSE}{\texttt{ MIT}} 