Thêm lớp CSS trong TypeScript

Thành thật mà nói, tôi không mong đợi bất kỳ vấn đề nào với chủ đề này nhưng tôi phải nói rằng tôi đã dành một ngày để tìm cách thiết lập các mô-đun CSS trong dự án TypeScript để hoạt động như tôi muốn. Có rất nhiều bài viết bạn có thể đọc về chủ đề này nhưng hầu hết chúng tôi không quản lý để làm việc. Tôi tránh React những ngày này do cần phải thay đổi tư duy để chấp nhận mẫu Flux và tất cả các phần khác được yêu cầu như Redux nhưng tôi sẽ không giải thích thêm về điều đó

Mục tiêu của tôi là thiết lập các Mô-đun CSS trong dự án Bản mô tả được xây dựng bằng Webpack trong khi đạt được các mục tiêu sau

• Thời gian xây dựng nhanh để phát triển
• Css thu nhỏ được hợp nhất thành một tệp để sản xuất
• CSS tách rời thành các tệp riêng biệt
• Các lớp CSS riêng biệt cho các thành phần từ CSS phổ biến cho ứng dụng
• Tự động hoàn thành trong Mã VS cho các mô-đun CSS

Mục tiêu đầu tiên cần đạt được là khả năng nhập tệp css trong dự án

import "./src/static/style.css";

Để làm như vậy, cấu hình webpack của bạn phải có trình tải cho các tệp css. Tôi đã sử dụng css-loader cho như vậy

Vì vậy, bạn cần cài đặt nó trước bằng lệnh

npm install --save-dev css-loader

Sau đó, bạn cần chỉ định trong tệp cấu hình webpack của mình trong phần mô-đun -> quy tắc cách tệp CSS sẽ được tải

module.exports = {
...module: {
  rules: [
   {
     test: /\.css$/i,
     use: [
      {loader: 'css-loader', options:{url: false}}
     ]
   }
  ],...
}

Với thiết lập này, webpack của bạn sẽ tải nội dung của tất cả các tệp css theo thứ tự do đó được nhập theo cú pháp

import "filename.css"

Bản dựng Weblack sẽ hoạt động nhưng vấn đề là nội dung này ngoại trừ được lưu trữ trong tệp JS đã biên dịch, không thể được sử dụng cho bất kỳ mục đích gì

If you want to embed content of all css files in host page within