stylus-nocache-loader
This is a fork
This is a fork of the original stylus-loader that disables caching and webpack resolve behavior in @import / @require statements. This is due to a bug where multiple files erroneously map to the same cache entry: shama/stylus-loader#44
I am using this forked version until the original stylus-loader is patched.
$ npm install stylus-nocache-loader
And in your webpack config or require() calls, refer to stylus-nocache
instead of stylus
.
Original README below:
stylus-loader
Usage
var css = ; // Just the CSSvar css = ; // CSS with processed url(...)s
See css-loader to see the effect of processed url(...)
s.
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 document
:
module: loaders: test: /\.styl$/ loader: 'style-loader!css-loader!stylus-loader'
and then 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 require('styles')
or @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 ~
and @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 @import './that-folder'
, it'll end up importing a javascript file into your stylus.
Stylus Plugins
You can also use stylus plugins by adding an extra stylus
section to your webpack.config.js
.
var stylus_plugin = ;module: loaders: test: /\.styl$/ loader: 'style-loader!css-loader!stylus-loader' stylus: use:
Using nib with stylus
The easiest way of enabling nib
is to import it in the stylus options:
stylus: use: import: '~nib/lib/nib/index.styl'
where ~
resolves to node_modules/
Install
npm install stylus-loader --save-dev
Testing
npm test
open http://localhost:8080/test/
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style.
Release History
- Please see https://github.com/shama/stylus-loader/releases
- 1.3.0 - resolve use() calls (@mzgoddard), manual imports through path cache (@mzgoddard)
- 1.2.0 - files in package.json (@SimenB), test running with testem (@mzgoddard), and some performance changes (@mzgoddard)
- 1.1.0 - Pass through sourceMap option to stylus instead of defaulting to inline. Inherit source-map from devtool (@jordansexton).
- 1.0.0 - Basic source map support (@skozin). Remove nib as dep. stylus is now a direct dep (as peerDependencies are deprecated).
- 0.6.0 - Support loader prefixes when resolving paths (@kpdecker).
- 0.5.0 - Disable Stylus parser caching in listImports (@DaQuirm). Update to stylus@0.49.2 and nib@1.0.4 as peerDependencies (@kompot).
- 0.4.0 - Allow configuration of plugins through webpack config (@bobzoller). Update to stylus 0.47.2 (@shanewilson).
- 0.3.1 - Fix when dependency (@tkellen)
- 0.3.0 - Define url resolver() when "resolve url" option is true (@mzgoddard).
- 0.2.0 - Now tracks dependencies for @import statements making cacheable work. Update stylus dep.
- 0.1.0 - Initial release
License
Copyright (c) 2014 Kyle Robinson Young
Licensed under the MIT license.