Làm cách nào để xóa Bootstrap khỏi CSS?

Để xóa kiểu danh sách trong Bootstrap, hãy sử dụng. lớp không theo kiểu danh sách

Bạn có thể thử chạy đoạn mã sau để triển khai. lớp không theo kiểu danh sách -

Ví dụ

Bản thử trực tiếp

   
      Bootstrap Example
      
      
      
   
   
      

         
Technologies
         

            
Home
            
PHP
            
Java
            
jQuery
            
JavaScript
            
Ruby
         
      

      

         
Technologies (Unstyled)
         

            
Home
            
PHP
            
Java
            
jQuery
            
JavaScript
            
Ruby
         
      

   

---

Giảm kích thước nội dung là một trong những cách thiết thực nhất để tăng tốc ứng dụng web của bạn. Tôi có một trường hợp sử dụng đơn giản, hãy tưởng tượng tệp HTML của bạn trông như thế này

Tệp HTML của bạn

Bây giờ hãy nhìn vào bootstrap-grid.min.css

Khá lớn phải không?

Cách sử dụng

Purgecss có thể được cài đặt với gói npmnpm i --save-dev purgecss

Về cơ bản, bạn chạy nó với các tệp CSS và tệp HTML/JavaScript của bạn. Nó sẽ phân tích cú pháp và phân tích nội dung CSS nào sẽ được sử dụng và loại bỏ nội dung CSS không sử dụng

PurgeCSS có thể được sử dụng như một CLI. Đây là cấu trúc dự án của chúng tôi, chúng tôi sẽ cần chuyển đổi các tệp CSS, vì vậy chúng tôi phải tải xuống bản phân phối bootstrap và nhận tệp chúng tôi muốn chuyển đổi

Cấu trúc dự án

Đây là cú pháp của lệnh CLI

purgecss --css  --content  --out 

Vì Purgecss được cài đặt trong /node_modules nên chúng ta phải chạy lệnh này thông qua tập lệnh npm. Chúng tôi sử dụng tùy chọn

purgecss --css  --content  --out 

0 để lưu trữ các tệp CSS đầu ra trong thư mục

purgecss --css  --content  --out 

1 sau khi chuyển đổi. Bây giờ thay đổi đường dẫn của bootstrap-grid.min.css trong

0 thành

Sau đó tạo npm script để chạy purgecss

Sau đó chạy npm run build, bạn sẽ thấy bootstrap-grid mới. tối thiểu. css trong thư mục dist với nội dung CSS không sử dụng đã bị xóa

Nội dung file CSS sau khi loại bỏ các lớp CSS không sử dụng

Kích thước tệp giảm từ 48kb xuống 651byte. Kinh ngạc

Bạn có thể xem các tùy chọn CLI đầy đủ tại https. //www. thanh trừng. com/cli

kho ví dụ. https. //github. com/PhmNgocNghia/purge-css-demo-cli

Thiết lập bằng Webpack

Purge CSS có thể được sử dụng cùng với các công cụ được tạo sẵn như webpack, gulp, grunt, v.v. Bạn có thể xem tài liệu của nó tại https. //www. thanh trừng. com/

Tôi sẽ trình bày cách tích hợp với Webpack. Đây là dự án đơn giản của tôi tích hợp dự án và Webpack

Cấu hình webpack dự án của tôi

trong chỉ mục của tôi. js, tôi chỉ cần nhập CSS lưới bootstrap

// Import CSS Grid min CSSimport 'bootstrap/dist/css/bootstrap-grid.min.css'

Đây là đầu ra bản dựng bao gồm tệp lưới CSS

Tệp CSS chiếm tới 47. 3 kb

Để sử dụng Purgecss với Webpack, chỉ cần cài đặt plugin Webpack này

npm i purgecss-webpack-plugin -D

Sau đó thêm nó vào phần plugin trong tệp cấu hình Webpack

chủ yếu. file css sau khi tối ưu phải nhỏ hơn nhờ purgecss

Kho ví dụ đầy đủ. https. //github. com/PhmNgocNghia/purge-css-example-webpack

Phần kết luận

Với Purgecss, tệp

1 của chúng tôi giảm từ 47kb xuống còn 601byte. Tất cả các bộ chọn không sử dụng đã bị xóa. Bạn có thể xem tài liệu tại https. //www. thanh trừng. com/ chứa hướng dẫn chi tiết và tham chiếu api

Không chỉ bootstrap, bạn có thể sử dụng Purgecss với nhiều thư viện css như TailwindCSS, Zurb Foundation,. vân vân

Làm cách nào để xóa thuộc tính Bootstrap CSS?

Làm cách nào để xóa CSS Bootstrap mặc định?

Làm cách nào để tắt một số Bootstrap CSS?

Làm cách nào để ghi đè Bootstrap CSS?