Laravel Mix: merge media queries

Trong quá trình làm việc với Laravel Mix có một điều xảy ra đó là các css media query nằm rải rác khắp nơi, thấy ngứa mắt nên mình gộp lại thôi 😆

Ví dụ nhé:

@media (min-width: 1200px) {
  /* Chung Nguyễn Blog */
  .name {
    height: 168px;
  }
}

@media (min-width: 1200px) {
  /* Website */
  .webiste {
    font-weight: bold;
  }
}

Khi build ra sẽ y chang như trên thay vì như thế này:

@media (min-width: 1200px) {
  /* Chung Nguyễn Blog */
  .name {
    height: 168px;
  }
  
  /* Website */
  .webiste {
    font-weight: bold;
  }
}

Để giải quyết các bạn làm như sau:

Cài thêm gói css-mqpacker bằng npm hoặc yarn command:

// npm
npm install css-mqpacker
// hoặc yarn
yarn add css-mqpacker

Sau đó trong file webpack.mix.js add thêm đoạn code js như dưới đây

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        postCss: [
            require("css-mqpacker")
        ]
    });

Xong rồi, chạy lệnh npm run dev hoặc npm run prod để build file nhé 🍇

Source code tại đây: https://github.com/nguyentranchung/laravel-tutorials/tree/laravel-mix-merge-media-queries