Laravel 5.4 MIX + Stylus

1. Remove Mix
2. Install Elixir

Done ☺

Maybe, but I want to use Mix, because it's based on WebPack.

I'm not 100% sure about this, but I believe Elixir uses WebPack as well, you just have to use mix.webpack() instead of mix.scripts() and best of all, Elixir works.. it just works..

So until Mix works as painlessly as Elixir, I for one am sticking with it.. Plus, Elixir/Mix is not an important part of the project, both compile the scripts/styles so I chose the one that requires less time and hair pulling so I can focus on the actual project.

Elixir use Gulp for processing. Not WebPack.

https://laravel.com/docs/5.3/elixir#working-with-scripts

Is that not Webpack? Tbh I have zero interest in what it uses, like I mentioned, just as long as it compiles the scripts and simply works without me pulling out my hair..

PS. Not saying one is better than the other, it's just my personal preference.

Ok, thanks. But I'd like Jeff to make video about Laravel 5.4 and Stylus integration.

@dima - Mix is significantly more flexible and powerful than Laravel Elixir. Stylus works with it out of the box.

laravel new project && cd project
npm install

Then update webpack.mix.js to be:

mix.stylus('resources/assets/stylus/app.styl', 'public/css');

Finally, create that app.styl file, and do npm run dev.

Oh! Thanks.

Can you tell how to add Stylus plugins like nib, rupture, jeet?

Sure.

var mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.stylus('resources/assets/stylus/app.styl', 'public/css', {
    use: [
        require('rupture')() // npm install rupture
    ]
});

Thanks!

How I make it with mix.webpackConfig globall? For every file

So, I'm trying to use this:

mix.js('resources/assets/js/app.js', 'public/js')
   .stylus('resources/assets/stylus/app.styl', 'public/css',{ 
        use: [
        // Here you can require plugins. For example:
                require('nib')(),
                require('jeet')(),
                require('rupture')(),
            ],
            import: [
                '~nib/index.styl',
                '~rupture/rupture/index.styl',
                '~jeet/jeet.styl',
            ]
    });

But it throw errors via npm run dev

P.S. Of course, all node modules are installed.

Provide errors log:

 ERROR  Failed to compile with 3 errors                                                                                                                                                                                                                               8:53:26 PM

 error  in ./resources/assets/stylus/app.styl

Module build failed: Error
    at /Users/dima/Sites/laravel54/node_modules/webpack/lib/NormalModule.js:141:35
    at /Users/dima/Sites/laravel54/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/dima/Sites/laravel54/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/dima/Sites/laravel54/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/dima/Sites/laravel54/node_modules/stylus-loader/index.js:166:11
    at Renderer.render (/Users/dima/Sites/laravel54/node_modules/stylus/lib/renderer.js:107:12)
    at /Users/dima/Sites/laravel54/node_modules/stylus-loader/index.js:164:12
    at tryCatchReject (/Users/dima/Sites/laravel54/node_modules/when/lib/makePromise.js:840:30)
    at runContinuation1 (/Users/dima/Sites/laravel54/node_modules/when/lib/makePromise.js:799:4)
    at Fulfilled.when (/Users/dima/Sites/laravel54/node_modules/when/lib/makePromise.js:590:4)
    at Pending.run (/Users/dima/Sites/laravel54/node_modules/when/lib/makePromise.js:481:13)
    at Scheduler._drain (/Users/dima/Sites/laravel54/node_modules/when/lib/Scheduler.js:62:19)
    at Scheduler.drain (/Users/dima/Sites/laravel54/node_modules/when/lib/Scheduler.js:27:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

 @ multi ./resources/assets/js/app.js ./resources/assets/stylus/app.styl

 error  in ./resources/assets/stylus/app.styl

Module build failed: Error
    at /Users/dima/Sites/laravel54/node_modules/webpack/lib/NormalModule.js:141:35
    at /Users/dima/Sites/laravel54/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Users/dima/Sites/laravel54/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Users/dima/Sites/laravel54/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/dima/Sites/laravel54/node_modules/stylus-loader/index.js:166:11
    at Renderer.render (/Users/dima/Sites/laravel54/node_modules/stylus/lib/renderer.js:107:12)
    at /Users/dima/Sites/laravel54/node_modules/stylus-loader/index.js:164:12
    at tryCatchReject (/Users/dima/Sites/laravel54/node_modules/when/lib/makePromise.js:840:30)
    at runContinuation1 (/Users/dima/Sites/laravel54/node_modules/when/lib/makePromise.js:799:4)
    at Fulfilled.when (/Users/dima/Sites/laravel54/node_modules/when/lib/makePromise.js:590:4)
    at Pending.run (/Users/dima/Sites/laravel54/node_modules/when/lib/makePromise.js:481:13)
    at Scheduler._drain (/Users/dima/Sites/laravel54/node_modules/when/lib/Scheduler.js:62:19)
    at Scheduler.drain (/Users/dima/Sites/laravel54/node_modules/when/lib/Scheduler.js:27:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

 error

/Users/dima/Sites/laravel54/node_modules/extract-text-webpack-plugin/loader.js??ref--7-0!/Users/dima/Sites/laravel54/node_modules/style-loader/index.js!/Users/dima/Sites/laravel54/node_modules/css-loader/index.js!/Users/dima/Sites/laravel54/node_modules/postcss-loader/index.js!/Users/dima/Sites/laravel54/node_modules/stylus-loader/index.js??ref--7-4!/Users/dima/Sites/laravel54/resources/assets/stylus/app.styl doesn't export content

Rupture will automatically load in its mixins, so you don't need to explicitly import that. This setup is fully working for me.

https://www.dropbox.com/s/dwxddjwsons0g80/Screenshot%202017-02-18%2013.05.44.png?dl=0

webpack.mix.js

var mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.stylus('resources/assets/stylus/app.styl', 'public/css', {
    use: [
        require('rupture')(),
        require('nib')(),
        require('jeet')()
    ],
    import: [
        '~nib/index.styl',
        '~jeet/jeet.styl'
    ]
});

resources/assets/stylus/app.styl

#back-to-top
  fixed bottom right // nib

section
    center(960px) // jeet

.thing
    +tablet() // rupture
        background blue

public/css/app.css

#back-to-top {
  position: fixed;
  bottom: 0;
  right: 0;
}
section {
  width: auto;
  max-width: 960px;
  float: none;
  display: block;
  margin-right: auto;
  margin-left: auto;
  padding-left: 0;
  padding-right: 0;
}
section::after {
  content: '';
  display: table;
  clear: both;
}
@media only screen and (min-width: 400px) and (max-width: 1050px) {
  .thing {
    background: #00f;
  }
}

Thanks. That's great.

Only one issue: col shortcut for column function in Jeet doesn't work.

@Dima - I think Jeet removed aliases like that with version 7, right?

Oh, fine. I missed this stuff. But col alias is still in the docs on the official Jeet site.

@Dima I guess they haven't updated it yet.

https://www.dropbox.com/s/ofcoszi089n6fj8/Screenshot%202017-02-18%2013.24.59.png?dl=0

You can manually add it back in by doing:

col()
  column(arguments)

Gratefully acknowledge!