A \href{http://learnboost.github.io/stylus/}{\texttt{ stylus}} loader for \href{https://github.com/webpack/webpack}{\texttt{ webpack}}.

\href{https://travis-ci.org/shama/stylus-loader}{\texttt{ }} \href{https://badge.fury.io/js/stylus-loader}{\texttt{ }}\hypertarget{md_sfcode_node_modules_stylus_loader_README_autotoc_md29739}{}\doxysection{Install}\label{md_sfcode_node_modules_stylus_loader_README_autotoc_md29739}
{\ttfamily npm install stylus-\/loader stylus -\/-\/save-\/dev}

{\bfseries{Important}}\+: in order to have ability use any {\ttfamily stylus} package version, it won\textquotesingle{}t be installed automatically. So it\textquotesingle{}s required to add it to {\ttfamily package.\+json} along with {\ttfamily stylus-\/loader}.

The latest version supporting webpack 1 can be installed with\+:

{\ttfamily npm install stylus-\/loader@webpack1 stylus -\/-\/save-\/dev}\hypertarget{md_sfcode_node_modules_stylus_loader_README_autotoc_md29740}{}\doxysection{Usage}\label{md_sfcode_node_modules_stylus_loader_README_autotoc_md29740}

\begin{DoxyCode}{0}
\DoxyCodeLine{var css = require('!raw!stylus!./file.styl'); // Just the CSS}
\DoxyCodeLine{var css = require('!css!stylus!./file.styl'); // CSS with processed url(...)s }

\end{DoxyCode}


See \href{https://github.com/webpack/css-loader}{\texttt{ css-\/loader}} to see the effect of processed {\ttfamily url(...)}s.

Or within the webpack config\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module: \{}
\DoxyCodeLine{  loaders: [\{}
\DoxyCodeLine{    test: /\(\backslash\).styl\$/,}
\DoxyCodeLine{    loader: 'css-\/loader!stylus-\/loader?paths=node\_modules/bootstrap-\/stylus/stylus/'}
\DoxyCodeLine{  \}]}
\DoxyCodeLine{\} }

\end{DoxyCode}


Then you can\+: `var css = require('./file.styl\textquotesingle{});\`{}.

Use in tandem with the \href{https://github.com/webpack/style-loader}{\texttt{ style-\/loader}} to add the css rules to your {\ttfamily document}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module: \{}
\DoxyCodeLine{  loaders: [}
\DoxyCodeLine{    \{ test: /\(\backslash\).styl\$/, loader: 'style-\/loader!css-\/loader!stylus-\/loader' \}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\} }

\end{DoxyCode}


and then `require('./file.styl\textquotesingle{});\`{} will compile and add the CSS to your page.

{\ttfamily stylus-\/loader} can also take advantage of webpack\textquotesingle{}s resolve options. With the default options it\textquotesingle{}ll find files in {\ttfamily web\+\_\+modules} as well as {\ttfamily node\+\_\+modules}, make sure to prefix any lookup in node\+\_\+modules with {\ttfamily $\sim$}. For example if you have a styles package lookup files in it like `@import '$\sim$styles/my-\/styles{\ttfamily . It can also find stylus files without having the extension specified in the}@import\`{} and index files in folders if webpack is configured for stylus\textquotesingle{}s file extension.


\begin{DoxyCode}{0}
\DoxyCodeLine{module: \{}
\DoxyCodeLine{  resolve: \{}
\DoxyCodeLine{    extensions: ['', '.js', '.styl']}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\} }

\end{DoxyCode}


will let you have an {\ttfamily index.\+styl} file in your styles package and `require(\textquotesingle{}styles'){\ttfamily or}@import \textquotesingle{}$\sim$styles\textquotesingle{}{\ttfamily it. It also lets you load a stylus file from a package installed in node\+\_\+modules or if you add a modules\+Directories, like}modules\+Directories\+: \mbox{[}\textquotesingle{}node\+\_\+modules\textquotesingle{}, \textquotesingle{}web\+\_\+modules\textquotesingle{}, \textquotesingle{}bower\+\_\+components\textquotesingle{}\mbox{]}{\ttfamily option you could load from a folder like bower\+\_\+components. To load files from a relative path leave off the}$\sim${\ttfamily and}@import \textquotesingle{}relative-\/styles/my-\/styles\textquotesingle{};\`{} it.

Be careful though not to use the extensions configuration for two types of in one folder. If a folder has a {\ttfamily index.\+js} and a {\ttfamily index.\+styl} and you `@import './that-\/folder\textquotesingle{}\`{}, it\textquotesingle{}ll end up importing a javascript file into your stylus.\hypertarget{md_sfcode_node_modules_stylus_loader_README_autotoc_md29741}{}\doxysubsection{Stylus Plugins}\label{md_sfcode_node_modules_stylus_loader_README_autotoc_md29741}
You can also use stylus plugins by adding an extra {\ttfamily stylus} section to your {\ttfamily webpack.\+config.\+js}.


\begin{DoxyCode}{0}
\DoxyCodeLine{var stylus\_plugin = require('stylus\_plugin');}
\DoxyCodeLine{module: \{}
\DoxyCodeLine{  loaders: [}
\DoxyCodeLine{    \{ test: /\(\backslash\).styl\$/, loader: 'style-\/loader!css-\/loader!stylus-\/loader' \}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\},}
\DoxyCodeLine{stylus: \{}
\DoxyCodeLine{  use: [stylus\_plugin()]}
\DoxyCodeLine{\} }

\end{DoxyCode}


Multiple configs can be used by giving other configs different names and referring to the with the {\ttfamily config} query option.


\begin{DoxyCode}{0}
\DoxyCodeLine{var stylus\_plugin = require('stylus\_plugin');}
\DoxyCodeLine{module: \{}
\DoxyCodeLine{  loaders: [}
\DoxyCodeLine{    \{}
\DoxyCodeLine{      test: /\(\backslash\).other\(\backslash\).styl\$/,}
\DoxyCodeLine{      loader: 'style-\/loader!css-\/loader!stylus-\/loader?config=stylusOther'}
\DoxyCodeLine{    \}}
\DoxyCodeLine{  ]}
\DoxyCodeLine{\},}
\DoxyCodeLine{stylusOther: \{}
\DoxyCodeLine{  use: [stylus\_plugin()]}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_stylus_loader_README_autotoc_md29742}{}\doxysubsubsection{Webpack 2}\label{md_sfcode_node_modules_stylus_loader_README_autotoc_md29742}
Webpack 2 formalizes its options with a schema. Options can be provided to {\ttfamily stylus-\/loader} in the options field to {\ttfamily module.\+rules} or through Loader\+Options\+Plugin or {\ttfamily stylus-\/loader}\textquotesingle{}s Options\+Plugin (a convenience wrapper around Loader\+Options\+Plugin).

Config through module rules\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module: \{}
\DoxyCodeLine{  rules: [}
\DoxyCodeLine{    \{}
\DoxyCodeLine{      test: /\(\backslash\).styl\$/,}
\DoxyCodeLine{      use: [}
\DoxyCodeLine{        'style-\/loader',}
\DoxyCodeLine{        'css-\/loader',}
\DoxyCodeLine{        \{}
\DoxyCodeLine{          loader: 'stylus-\/loader',}
\DoxyCodeLine{          options: \{}
\DoxyCodeLine{            use: [stylus\_plugin()],}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        \},}
\DoxyCodeLine{      ],}
\DoxyCodeLine{    \}}
\DoxyCodeLine{  ],}
\DoxyCodeLine{\}, }

\end{DoxyCode}


Config through Loader\+Options\+Plugin\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{module: \{}
\DoxyCodeLine{  rules: [}
\DoxyCodeLine{    \{}
\DoxyCodeLine{      test: /\(\backslash\).styl\$/,}
\DoxyCodeLine{      loader: 'style-\/loader!css-\/loader!stylus-\/loader',}
\DoxyCodeLine{    \},}
\DoxyCodeLine{  ],}
\DoxyCodeLine{\},}
\DoxyCodeLine{plugins: [}
\DoxyCodeLine{  new webpack.LoaderOptionsPlugin(\{}
\DoxyCodeLine{    test: /\(\backslash\).styl\$/,}
\DoxyCodeLine{    stylus: \{}
\DoxyCodeLine{      // You can have multiple stylus configs with other names and use them}
\DoxyCodeLine{      // with `stylus-\/loader?config=otherConfig`.}
\DoxyCodeLine{      default: \{}
\DoxyCodeLine{        use: [stylus\_plugin()],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{      otherConfig: \{}
\DoxyCodeLine{        use: [other\_plugin()],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    \},}
\DoxyCodeLine{  \}),}
\DoxyCodeLine{], }

\end{DoxyCode}


Config through {\ttfamily stylus-\/loader}\textquotesingle{}s Options\+Plugin (convenience wrapper for Loader\+Options\+Plugin)\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{plugins: [}
\DoxyCodeLine{  new stylusLoader.OptionsPlugin(\{}
\DoxyCodeLine{    default: \{}
\DoxyCodeLine{      use: [stylus\_plugin()],}
\DoxyCodeLine{    \},}
\DoxyCodeLine{  \}),}
\DoxyCodeLine{], }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_stylus_loader_README_autotoc_md29743}{}\doxysubsubsection{Using nib with stylus}\label{md_sfcode_node_modules_stylus_loader_README_autotoc_md29743}
The easiest way of enabling {\ttfamily nib} is to import it in the stylus options\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{stylus: \{}
\DoxyCodeLine{  use: [require('nib')()],}
\DoxyCodeLine{  import: ['\string~nib/lib/nib/index.styl']}
\DoxyCodeLine{\} }

\end{DoxyCode}


where {\ttfamily $\sim$} resolves to {\ttfamily node\+\_\+modules/}\hypertarget{md_sfcode_node_modules_stylus_loader_README_autotoc_md29744}{}\doxysubsection{Prefer webpack resolving}\label{md_sfcode_node_modules_stylus_loader_README_autotoc_md29744}
{\ttfamily stylus-\/loader} currently prefers resolving paths with stylus\textquotesingle{}s resovling utilities and then falling back to webpack when it can\textquotesingle{}t find files. Use the {\ttfamily prefer\+Path\+Resolver} option with the value `\textquotesingle{}webpack'\`{} to swap this. This has the benefit of using webpack\textquotesingle{}s async resolving instead of stylus\textquotesingle{}s sync resolving. If you have a lot of dependencies in your stylus files this\textquotesingle{}ll let those dependencies be found in parallel.


\begin{DoxyCode}{0}
\DoxyCodeLine{stylus: \{}
\DoxyCodeLine{  preferPathResolver: 'webpack',}
\DoxyCodeLine{\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_stylus_loader_README_autotoc_md29745}{}\doxysection{Testing}\label{md_sfcode_node_modules_stylus_loader_README_autotoc_md29745}

\begin{DoxyCode}{0}
\DoxyCodeLine{npm test}
\DoxyCodeLine{open http://localhost:8080/test/ }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_stylus_loader_README_autotoc_md29746}{}\doxysection{Contributing}\label{md_sfcode_node_modules_stylus_loader_README_autotoc_md29746}
In lieu of a formal styleguide, take care to maintain the existing coding style.\hypertarget{md_sfcode_node_modules_stylus_loader_README_autotoc_md29747}{}\doxysection{Release History}\label{md_sfcode_node_modules_stylus_loader_README_autotoc_md29747}

\begin{DoxyItemize}
\item Please see \href{https://github.com/shama/stylus-loader/releases}{\texttt{ https\+://github.\+com/shama/stylus-\/loader/releases}}
\item 3.\+0.\+1 -\/ Update install instructions mentioning how to get a version supporting webpack 1 (@mzgoddard)
\item 3.\+0.\+0 -\/ Fix loader-\/utils deprecation warning (@ryani33), Drop webpack 1 and Node$<$4 support (@mzgoddard)
\item 2.\+5.\+1 -\/ Fix paths mutation in options (@vio)
\item 2.\+5.\+0 -\/ Define paths in global stylus\+Options, in addtion to query params (@\+Joun\+Qin)
\item 2.\+4.\+0 -\/ Add Options\+Plugin to help support webpack 2 (@mzgoddard)
\item 2.\+3.\+1 -\/ Fix typo in README (@stevewillard)
\item 2.\+3.\+0 -\/ Fix most use cases of relative path resolving (@mzgoddard), Add option to prefer a path resolver (webpack or stylus) (@mzgoddard)
\item 2.\+2.\+0 -\/ Let stylus use option be just a function (@yuffiy), Track json calls as imports like use calls (@gnarf)
\item 2.\+1.\+2 -\/ Fix support for stylus include config (@andrewburgess), Add block-\/level imports to listimports (@kenaniah)
\item 2.\+1.\+1 -\/ Support Node 6 (@yyx990803), Test in webpack 1 and 2 (@phyllisstein)
\item 2.\+1.\+0 -\/ Add support for stylus\textquotesingle{}s include and set (@michaek)
\item 2.\+0.\+1 -\/ Add peer dependency on stylus (@jchitel), fix Path\+Cache for webpack 2 (@\+Unhelpful)
\item 2.\+0.\+0 -\/ Remove dependency on stylus (@kossnocorps)
\item 1.\+6.\+1 -\/ Remove version breaking change in 1.\+6.\+0
\item 1.\+6.\+0 -\/ Remove dependency on stylus (@kossnocorps)
\item 1.\+3.\+0 -\/ resolve use() calls (@mzgoddard), manual imports through path cache (@mzgoddard)
\item 1.\+2.\+0 -\/ files in package.\+json (@\+SimenB), test running with testem (@mzgoddard), and some performance changes (@mzgoddard)
\item 1.\+1.\+0 -\/ Pass through source\+Map option to stylus instead of defaulting to inline. Inherit source-\/map from devtool (@jordansexton).
\item 1.\+0.\+0 -\/ Basic source map support (@skozin). Remove nib as dep. stylus is now a direct dep (as peer\+Dependencies are deprecated).
\item 0.\+6.\+0 -\/ Support loader prefixes when resolving paths (@kpdecker).
\item 0.\+5.\+0 -\/ Disable Stylus parser caching in list\+Imports (@\+Da\+Quirm). Update to \href{mailto:stylus@0.49}{\texttt{ stylus@0.\+49}}.2 and nib@1.\+0.\+4 as peer\+Dependencies (@kompot).
\item 0.\+4.\+0 -\/ Allow configuration of plugins through webpack config (@bobzoller). Update to stylus 0.\+47.\+2 (@shanewilson).
\item 0.\+3.\+1 -\/ Fix when dependency (@tkellen)
\item 0.\+3.\+0 -\/ Define url resolver() when \char`\"{}resolve url\char`\"{} option is true (@mzgoddard).
\item 0.\+2.\+0 -\/ Now tracks dependencies for @import statements making cacheable work. Update stylus dep.
\item 0.\+1.\+0 -\/ Initial release
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_stylus_loader_README_autotoc_md29748}{}\doxysection{License}\label{md_sfcode_node_modules_stylus_loader_README_autotoc_md29748}
Copyright (c) 2018 Kyle Robinson Young ~\newline
 Licensed under the MIT license. 