Stylus loader for webpack
var css = ; // Just the CSSvar css = ; // CSS with processed url(...)s
See css-loader to see the effect of processed
Or within the webpack config:
module:loaders:test: /\.styl$/loader: 'css-loader!stylus-loader?paths=node_modules/bootstrap-stylus/stylus/'
Then you can:
var css = require('./file.styl');.
Use in tandem with the style-loader to add the css rules to your
module:loaders:test: /\.styl$/ loader: 'style-loader!css-loader!stylus-loader'
require('./file.styl'); will compile and add the CSS to your page.
stylus-loader can also take advantage of webpack's resolve options. With the default options it'll find files in
web_modules as well as
node_modules, make sure to prefix any lookup in node_modules with
~. For example if you have a styles package lookup files in it like
@import '~styles/my-styles. 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's file extension.
module:resolve:extensions: '' '.js' '.styl'
will let you have an
index.styl file in your styles package and
@import '~styles' it. It also lets you load a stylus file from a package installed in node_modules or if you add a modulesDirectories, like
modulesDirectories: ['node_modules', 'web_modules', 'bower_components'] option you could load from a folder like bower_components. To load files from a relative path leave off the
@import 'relative-styles/my-styles'; it.
Be careful though not to use the extensions configuration for two types of in one folder. If a folder has a
index.js and a
index.styl and you
You can also use stylus plugins by adding an extra
stylus section to your
var stylus_plugin = ;module:loaders:test: /\.styl$/ loader: 'style-loader!css-loader!stylus-loader'stylus:use:
The easiest way of enabling
nib is to import it in the stylus options:
~ resolves to
stylus-loader currently prefers resolving paths with stylus's resovling utilities and then falling back to webpack when it can't find files. Use the
preferPathResolver option with the value
'webpack' to swap this. This has the benefit of using webpack's async resolving instead of stylus's sync resolving. If you have a lot of dependencies in your stylus files this'll let those dependencies be found in parallel.
npm install stylus-loader stylus --save-dev
Important: in order to have ability use any
stylus package version,
it won't be installed automatically. So it's required to
add it to
package.json along with
In lieu of a formal styleguide, take care to maintain the existing coding style.
Copyright (c) 2014 Kyle Robinson Young
Licensed under the MIT license.