Laravel-mix: Use both Sass and Stylus

[P9Q]

Hello, laravel-mix compiles either Sass or Stylus, is there any way to compile both?

//compiles only Stylus

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

//compiles only Sass

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

[P9Q]

 WARNING  Compiled with 1 warnings                  17:56:07                           

 warning  in ./resources/assets/sass/app.scss

(Emitted value instead of an instance of Error)

 ⚠️  PostCSS Loader

Previous source map found, but options.sourceMap isn't set.
In this case the loader will discard the source map entirely for performance reasons.
See https://github.com/postcss/postcss-loader#sourcemap for more information.



 @ ./resources/assets/sass/app.scss 4:14-266
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss ./resources/assets/stylus/app.styl

[P9Q]

  "devDependencies": {
    "axios": "^0.16.2",
    "laravel-mix": "^1.4",
    "vue": "^2.4.2"
  },
  "dependencies": {
    "browser-sync": "^2.18.13",
    "browser-sync-webpack-plugin": "^1.2.0",
    "font-awesome": "^4.7.0",
    "material-design-icons": "^3.0.1",
    "postcss-css-variables": "^0.8.0",
    "postcss-loader": "^2.0.6",
    "rupture": "^0.6.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vuetify": "^0.15.0-beta.2"
  }

[ridewn]

This is not an issue, as it is not compiling "either sass or stylus", it is simply compiling the first stylesheet you specify, and then the second, and since you don't have any output name specified, it is overwriting the default app.css file that was generated from whichever stylesheet compiled first, so it looks like it has only compiled one of the stylesheets. My suggestion would be to compile both to different names, then use the styles method to concatenate both of the compiled stylesheets:

mix.sass('resources/assets/sass/app.scss', 'public/css/sass.css')
   .stylus('resources/assets/sass/app.styl', 'public/css/stylus.css')
   .styles(['public/css/sass.css', 'public/css/stylus.css'])

That should create an app.css stylesheet that contains both the scss and stylus stylesheets combined.

This may have been a misunderstanding, but in the future, if your question isn't explicitly about an issue with Laravel Mix, you should try asking your question on StackOverflow or the Laracast forum's before opening an actual issue. Thanks!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.