Hướng dẫn tsx import css - tsx nhập css

13 tháng 7 năm 2021

Trong video này, tôi sẽ chỉ cho bạn cách làm cho ứng dụng phản ứng của bạn đáng tin cậy hơn. Các thành phần và tên lớp của bạn sẽ luôn nhất quán. Và lần sau, khi bạn xóa tên lớp để nó không còn tồn tại, bạn sẽ gặp lỗi biên dịch.

Các lệnh đã sử dụng:

  • npx create-react-app my-app --template typescript
  • npm run start
  • npm install -D dts-css-modules-loader
  • git add . && git commit -m "Initial commit"
  • npm run eject
  • npm run build

Đầu tiên, hãy để tạo ra một ứng dụng React với các thành phần TypeScript. Đối với điều này, trong dòng lệnh, chúng ta cần thực thi: npx create-react-app my-app --template typescript

Tiếp theo, chúng tôi đi đến thư mục ứng dụng và thực thi npm run start, để đảm bảo ứng dụng hoạt động.

Bây giờ, nếu chúng ta mở thành phần App.tsx, chúng ta sẽ thấy npx create-react-app my-app --template typescript0. Dòng này nhập các kiểu từ tệp CSS và chúng ta có thể sử dụng chúng làm tên lớp như npx create-react-app my-app --template typescript1.

Nhưng nếu chúng ta thay đổi tên của lớp này hoặc xóa nó. Hãy cùng làm điều đó và lưu tệp CSS. Trong trường hợp này, ứng dụng vẫn đang chạy và chúng tôi không nhận được bất kỳ lỗi hoặc cảnh báo nào theo mặc định. Điều này có nghĩa là đôi khi chúng tôi thậm chí có thể không nhận thấy sự không nhất quán như vậy trong ứng dụng của chúng tôi. Điều này thậm chí còn gây khó chịu hơn khi chúng tôi không nhận được bất kỳ lợi ích nào từ việc sử dụng hệ thống loại TypeScript.

Vì vậy, hãy để tôi chỉ cho bạn cách cải thiện tình huống này (và bây giờ tôi muốn trả lại tên lớp bị loại bỏ). Được.

Trước hết, chúng tôi cần cài đặt gói npx create-react-app my-app --template typescript2. Đây là một trình tải đơn giản tạo ra các tệp khai báo TypeScript dựa trên các tệp CSS mà nó tìm thấy.

Tiếp theo, chúng ta cần đưa trình tải kiểu này vào đường ống của chúng tôi. Đối với điều này, tôi sẽ cập nhật tệp cấu hình webpack. Hãy cùng giai đoạn thay đổi của chúng tôi bằng cách thực hiện lệnh git add . && git commit -m "Initial commit".

Bây giờ, chúng tôi có thể chạy lệnh npm run eject, cho phép chúng tôi cập nhật các tệp cấu hình.

Trong npx create-react-app my-app --template typescript5, chúng tôi tìm thấy một phần cấu hình xác định danh sách các trình tải kiểu cho các tệp CSS. Hãy để thay đổi nó:

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: [
    {
      loader: require.resolve('style-loader'),
      options: {
        esModule: false,
      },
    },
    {
      loader: require.resolve('dts-css-modules-loader'),
      options: {
        namedExport: true
      }
    },
    {
      loader: require.resolve('css-loader'),
      options: {
        modules: {
          exportLocalsConvention: 'camelCaseOnly',
          localIdentName: "[hash:base64:5]",
        }
      }
    }
  ]
}

Chúng tôi đã xác định danh sách các trình tải kiểu riêng mà chúng tôi muốn áp dụng cho các tệp CSS trong dự án của chúng tôi. Và npx create-react-app my-app --template typescript2 bây giờ là một trong số đó.

Hãy để lưu nó và xây dựng ứng dụng với lệnh npm run build.

Khi bản dựng hoàn tất, bạn có thể nhận thấy tệp npx create-react-app my-app --template typescript8 mới được tạo bởi trình tải của chúng tôi. Nếu chúng tôi mở nó, chúng tôi có thể thấy rằng tệp hiện chứa khai báo tên lớp của chúng tôi.

Hãy để mở tệp App.tsx và cuối cùng nhập tên lớp của chúng tôi. Tất cả những gì chúng tôi phải làm là cập nhật dòng nhập lên npm run start0.

Bây giờ, chúng tôi có thể tham khảo tên lớp của chúng tôi bằng cách sử dụng đối tượng lớp.

Ví dụ, chúng tôi thay đổi:

  • npm run start1 đến npm run start2
  • npm run start3 đến npm run start4
  • npm run start5 và npm run start6 một cách thích hợp

Nếu chúng tôi bắt đầu ứng dụng, chúng tôi sẽ thấy rằng nó hoạt động như trước.

Nhưng nếu chúng ta thay đổi một tên lớp hoặc xóa nó.

Hãy để lưu tệp.

Và kể từ bây giờ, trong trường hợp có bất kỳ sự không nhất quán nào với các kiểu của chúng tôi, chúng tôi sẽ nhận được thông báo lỗi trong VSCODE và cũng là lỗi biên dịch trong ứng dụng. Theo tôi, cách tiếp cận này là vô cùng hữu ích và hoàn toàn bắt buộc đối với bất kỳ ứng dụng phản ứng lớn nào.

Và đó là tất cả cho ngày hôm nay. Tôi hy vọng phương pháp này sẽ làm cho các ứng dụng phản ứng của bạn vững chắc hơn và giúp bạn tiết kiệm rất nhiều thời gian.

Liên kết đến mã nguồn nằm trong mô tả của video này. Và tôi hy vọng sẽ gặp bạn lần sau.

References:

  • Mã nguồn
  • Phần cấu hình
  • Cách sử dụng các mô -đun CSS với TypeScript và WebPack
  • Gói NPM DTS-CSS-Modules-Loader

Theo dõi tôi trực tuyến

Tham gia Discord: https://discord.gg/v4ymgpqzrb

  • GitHub: https://github.com/fsou1
  • LinkedIn: https://www.linkedin.com/in/maxim-zhukov-0648a8b5
  • YouTube: https://www.youtube.com/channel/ucz6azvaboichppi43y-hd5g
  • Telegram: https://t.me/Sasoneddev