What is stylus-loader?
The stylus-loader npm package is a utility that allows you to load and compile Stylus files directly in Webpack. This integration facilitates the use of Stylus, a pre-processor for CSS, enabling developers to write cleaner and more efficient style sheets by utilizing variables, functions, and mixins.
What are stylus-loader's main functionalities?
Loading and Compiling Stylus Files
This feature allows developers to integrate Stylus files into their Webpack build process. The provided code configures Webpack to use stylus-loader along with css-loader and style-loader to process files ending in .styl, compile them into CSS, and inject them into the DOM.
module.exports = {
module: {
rules: [
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
}
]
}
};
Custom Import Paths
This feature allows the specification of custom paths where Stylus files are located, making it easier to organize and maintain stylesheets. The code sample demonstrates how to add custom paths to the stylus-loader configuration in Webpack.
module.exports = {
module: {
rules: [
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
{
loader: 'stylus-loader',
options: {
paths: ['node_modules', 'path/to/import/dir']
}
}
]
}
]
}
};
Other packages similar to stylus-loader
sass-loader
Similar to stylus-loader, sass-loader is used to compile Sass files into CSS within the Webpack build process. While both loaders serve a similar purpose for different CSS pre-processors (Stylus for stylus-loader and Sass/SCSS for sass-loader), the choice between them typically depends on the specific syntax and features preferred by the developer.
less-loader
less-loader functions similarly to stylus-loader but for Less files. It integrates with Webpack to compile Less into CSS. Like stylus-loader, it supports customizations such as modifying variable values and managing import paths. The main difference lies in the syntax and capabilities of Less compared to Stylus.
stylus-loader
A stylus loader for webpack.
Usage
var css = require('!raw!stylus!./file.styl');
var css = require('!css!stylus!./file.styl');
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.
Install
npm install stylus-loader --save-dev
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style.
Release History
- 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) 2013 Kyle Robinson Young
Licensed under the MIT license.