[Laravel] Laravel Mix using postcss-sprites

laravel-mix-postcss-sprites.md

Laravel 5.5 - Laravel Mix using postcss-sprites

webpack.mix.js

// https://github.com/2createStudio/postcss-sprites/issues/69

let 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.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .options({
    postCss: [
      require('postcss-sprites')({
        groupBy: function (image) {
          return Promise.resolve(image.url.split('/').slice(-2, -1)[0])
        }
      })
    ]
  })
  .browserSync('localhost:8000')

let 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.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .options({
    postCss: [
      require('postcss-sprites')({
        groupBy: function (image) {
          return Promise.resolve(image.url.split('/').slice(-2, -1)[0])
        },
        retina: true
      })
    ]
  })
  .browserSync('localhost:8000')

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables
@import "variables";
// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

div {
  &.testing {
    background-image: url('../images/shapes/1.jpg');
    width: 177px;
    height: 236px;
  }
  &.testing2 {
    background-image: url('../images/shapes/2.jpg');
    width: 178px;
    height: 237px;
  }
  &.testing3 {
    background-image: url('../images/happy/3.png');
    width: 540px;
    height: 540px;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  div {
    &.testing {
      background-image: url('../images/shapes/[email protected]');
    }
    &.testing2 {
      background-image: url('../images/shapes/[email protected]');
    }
  }
}