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
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.