Laravel Mix

[hectorsevillasandoval]

Is it possible to use this plugin with Laravel Mix?

[SassNinja]

Hi @barcadictni

thanks for your issue

I haven't worked with Laravel Mix yet, however according to what I read it seems similar to Symfony's Encore which is working (example)

So theoretically I should work but as usual: try and error 😉
(a PR which adds an appropriate example is welcome)

[rubenmeines]

Hey @barcadictni , after 2 days of messing around I found something that helped me out. My objective is just to extract media queries to make a heavy style.css a bit lighter. I am no expert in laravel mix or webpack so I can't guarantee you this is the correct way of doing it, but here is the code from my setup:

let mix = require('laravel-mix');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const MediaQueryPlugin = require('media-query-plugin');

mix.options({ 
  processCssUrls: false
});

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',                
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MediaQueryPlugin.loader,
          'postcss-loader',
          'sass-loader'             
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new MediaQueryPlugin({
      include: true,
      queries: {
        'screen and (max-width: 767px)': '767',
        'screen and (max-width: 1023px)': '1023',
        'screen and (max-width: 1279px)': '1279',
        'screen and (max-width: 1365px)': '1365',
        'screen and (max-width: 1439px)': '1439',
      }
    })
  ]
});

mix.js('src/js/app.js', 'js/app.min.js')
   .sass('src/sass/styles.scss', 'style.css');

This results in this file for example (which is not ideal):

Does anyone know how to combine these media queries so that it is just:
@media screen and (max-width: 767px){ // ALL THE CODE / CLASSES HERE }

?

[rubenmeines]

I found out how to do it with this package from current owner: https://github.com/SassNinja/postcss-combine-media-query

Just:

1. Install the package from the link above
2. create a file named 'postcss.config.js' in root folder where you have webpack.mix.js
3. Paste this code in postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-combine-media-query')    
  ]
};