Tìm thấy x bài viết trong xms.

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 

Đánh giá bài viết

Thích thì like
Laravel Mix: merge media queries
0/5 0 votes

Bình luận

Hiển thị bình luận Facebook