Laravel elixir stylus error

Question

I've installed the following package:

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

And it's working. Now I want to use https://github.com/peterramsing/lost lost with stylus. So I've added that but it's not working.

My package.json:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.0",
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0",
    "laravel-elixir-stylus": "^1.0.1",
    "postcss": "^5.0.21",
    "poststylus": "^0.2.3"
  }
}

gulpfile.js

var elixir = require('laravel-elixir');
var postStylus = require('poststylus');

elixir(function(mix) {
    mix.stylus('app.styl', null, {
        use: [postStylus(['lost', 'postcss-position'])]
    });
});

When I try npm install I receive the error:

npm WARN unmet dependency /Users/Janssen/Code/forum/node_modules/autoprefixer-core requires postcss@'~4.1.12' but will load
npm WARN unmet dependency /Users/egen/Code/forum/node_modules/postcss,
npm WARN unmet dependency which is version 5.0.21
npm WARN unmet dependency /Users/egen/Code/forum/node_modules/gulp-autoprefixer requires postcss@'^4.1.5' but will load
npm WARN unmet dependency /Users/egen/Code/foru

When I run gulp I receive:

Cannot find module 'postcss-position'

What should I do?

You sometimes have to clear the node modules directory, clear cache, update node and npm and then do a reinstall of all libraries. — Frisbetarian-Support Palestine, Jun 22 '16 at 08:03

score 0 · Answer 1 · answered Sep 29 '16 at 11:01

Unfortunately you can't use stylus with Laravel Elixir version 6 simultaneously. The workaround that I am using is to change the package.json and the gulpfile if I want to switch it around. For example If I want to use the new Laravel 5.3 front end features I have to amend the

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "babel-preset-es2015": "6.9.0",
    "gulp": "^3.9.1",
    "jquery": "^3.1.1",
    "laravel-elixir": "^6.0.0-11",
    "laravel-elixir-stylus": "^1.0.0",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-vueify": "^2.0.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "vue": "^1.0.26",
    "vue-resource": "^1.0.2"
  }
}

Gulpfile.js

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

require('laravel-elixir-webpack-official');
elixir(function(mix) {

   //mix.webpack('app.js');
});

If I want to use stylus

package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "babel-preset-es2015": "6.9.0",
    "gulp": "^3.9.1",
    "jquery": "^3.1.1",
    **"laravel-elixir": "^5.0.0-11",**
    "laravel-elixir-stylus": "^1.0.0",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-vueify": "^2.0.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "vue": "^1.0.26",
    "vue-resource": "^1.0.2"
  }
}

Gulpfile.js

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

require('laravel-elixir-stylus');

elixir(function(mix) {
   mix.stylus('app.stylus');
});

This is the workaround I have been using other than that we will have to wait for Jeffrey Way to update the core Laravel Elixir files to include the stylus component.

Laravel elixir stylus error

1 Answers1