Examples of Integration with Laravel Mix (Webpack)

[kerns]

I know this isn't the best place for general support but consider it a feature request? 🧐😬. I've been beating my head against the wall for a few too many hours now trying to get my breakpoint-slicer setup used previously in gulp to play nicely with Laravel Mix. Anyone have any success with this and if yes are you willing to share your mix file? 😢

[lolmaus]

Hey @kerns, thanks for reaching out!

This seems to be a general matter with setting up Sass in Laravel Mix, not related directly to Breakpoint Slicer.

Please see this guide: https://laravel-mix.com/docs/6.0/sass

If it does not help you, please ask for help in Laravel Mix or Laravel community! You are welcome to share the configuration here once you have it figured out.

Also note that Breakpoint Slicer has had a major release recently, rewritten from scratch and uncompatible with previous versions. Your old code will not work with the current version of Breakpoint Slicer and has to be refactored.

I'm closing this issue to help with tracking Breakpoint Slicer problems. You are welcome to continue the discussion and ask to reopen if you suspect your trouble is caused by a problem in Breakpoint Slicer specifically.

[kerns]

It's fine you close this, but my issue isn't in getting sass to work with larval mix – mix is doing just fine. It is just that in that in the before times with gulp, there was a specific way in which breakpoint-slicer needed to be called. My gulp file looked like this.

  // Build styles...
  function dev_css() {
    return gulp.src("src/style/index.scss")
    .pipe(sass({
        includePaths: ['./node_modules/breakpoint-sass/stylesheets/','./node_modules/breakpoint-slicer/stylesheets/'],
    }).on("error",sass.logError))
    .pipe(postcss([
      require('tailwindcss')('./tailwind.config.js'),
      require('autoprefixer')
    ]))
    .pipe(gulp.dest("public/css"))
    .pipe(rename({ suffix: ".min" }))
    .pipe(gulp.dest("public/css"))
    .pipe(browserSync.stream());
  }

It is the includePaths: ['./node_modules/breakpoint-sass/stylesheets/','./node_modules/breakpoint-slicer/stylesheets/'], specifically that seems to have everyone in mix world completely baffled.

Maybe it's not even necessary after the rewrite and with tailwind's new jit compiler – I will just set about the task of integrating your latest beta, see how it goes and take it from there. If I learn anything I will be sure to share back here. (Can't you enable discussions on this repo yet?) Cheers.

[lolmaus]

my issue isn't in getting sass to work with larval mix – mix is doing just fine. It is just that in that in the before times with gulp, there was a specific way in which breakpoint-slicer needed to be called

This is not specific to Breakpoint Slicer. includePaths is a standard feature of Sass, and you would use it for any Sass library. If you were able to use other Sass libraries without includePaths, then you should've been able to use Breakpoint Slicer likewise.

E. g. if you imported a foo library without includePaths like this:

@include "node_modules/foo/stylesheets/foo";

then you should've been able to import Breakpoint Slicer the same way:

// before
@include "breakpoint-slicier";

// after
@include "node_modules/breakpoint-slicer/stylesheets/breakpoint-slicer";

---

Have you even looked at the documentation page that I linked to?

It mentions plugin options and offers an example with outputStyle.

If it allows customizing the outputStyle option of Sass compiler, why wouldn't it allow customizing the includePaths option of Sass compiler?