https://github.com/jeffreyway/laravel-elixir-stylus

Elixir Wrapper Around Stylus
https://github.com/jeffreyway/laravel-elixir-stylus

Last synced: about 1 month ago
JSON representation

Elixir Wrapper Around Stylus

• Host: GitHub
• URL: https://github.com/jeffreyway/laravel-elixir-stylus
• Owner: JeffreyWay
• Created: 2014-10-14T01:11:09.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2016-10-31T20:47:41.000Z (about 8 years ago)
• Last Synced: 2024-10-31T17:55:22.122Z (about 2 months ago)
• Language: JavaScript
• Size: 26.4 KB
• Stars: 77
• Watchers: 6
• Forks: 20
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
## Usage

This Laravel Elixir extension allows you to compile Stylus.

## Installation

First, pull in the extension through NPM.

```

npm install --save-dev laravel-elixir-stylus

```

> Note: if using Laravel Elixir 6 or higher, pull in `[email protected]`. Otherwise, stick with `[email protected]`.

That's it! You're all set to go!

## Usage

Assuming you write...

```js

elixir(function(mix) {

   mix.stylus('app.styl');

});

```

...this will compile your `resources/assets/stylus/app.styl` file to `./public/css/app.css`.

If you'd like to set a different output directory, you may pass a second argument to the `stylus()` method, like so:

```js

mix.stylus('app.styl', './public/scripts/styles.css')

```

Finally, if you want to override the Stylus plugin options, you may pass an object as the third argument.

```js

mix.stylus('app.styl', null, {});

// See options at: https://www.npmjs.com/package/gulp-stylus#options

```

## PostCSS

This extension includes a PostCSS adapter out of the box, as well as support for the incredibly impressive [Lost](https://github.com/peterramsing/lost) grid system. Check out the documentation in that link, and immediately start using it in your projects with this extension. Zero setup. :)

If there are other PostCSS plugins you want to pull in, you may use the third argument to `mix.stylus()` - 

```js

var postStylus = require('poststylus'); // npm install --save-dev poststylus

mix.stylus('app.styl', null, {

   use: [postStylus(['lost', 'postcss-position'])] // npm install --save-dev postcss-position

});

```