TypeScript nhập CSS

Snowpack được thiết kế để hỗ trợ cú pháp Mô-đun ES gốc (ESM) của JavaScript. ESM cho phép bạn xác định nhập và xuất rõ ràng mà các trình duyệt và công cụ xây dựng có thể hiểu rõ hơn và tối ưu hóa cho. Nếu bạn đã quen thuộc với các từ khóa

// Load and inject 'style.css' onto the page
import './style.css';

0 và

// Load and inject 'style.css' onto the page
import './style.css';

1 trong JavaScript, thì bạn đã biết ESM

// ESM Example - src/user.js
export function getUser() {
  /* .. */
}

// src/index.js
import {getUser} from './user.js';

Tất cả các trình duyệt hiện đại đều hỗ trợ ESM, vì vậy Snowpack có thể gửi mã này trực tiếp tới trình duyệt trong quá trình phát triển. Đây là điều làm cho quy trình phát triển không theo nhóm của Snowpack trở nên khả thi

Snowpack cũng cho phép bạn nhập trực tiếp các tệp không phải JavaScript vào ứng dụng của mình. Snowpack tự động xử lý tất cả những điều này cho bạn nên không có gì phải định cấu hình, sử dụng logic sau

bản đánh máy

Snowpack bao gồm hỗ trợ tích hợp để xây dựng các tệp TypeScript (

// Load and inject 'style.css' onto the page
import './style.css';

2) thành JavaScript

Lưu ý rằng hỗ trợ tích hợp này chỉ được xây dựng. Theo mặc định, Snowpack không kiểm tra kiểu mã TypeScript của bạn. Để tích hợp kiểm tra loại vào quy trình phát triển/xây dựng của bạn, hãy thêm plugin @snowpack/plugin-typescript

JSX

Snowpack bao gồm hỗ trợ tích hợp để xây dựng tệp JSX (

// Load and inject 'style.css' onto the page
import './style.css';

3 &

// Load and inject 'style.css' onto the page
import './style.css';

4) thành JavaScript

Nếu bạn đang sử dụng Preact, Snowpack sẽ phát hiện ra điều này và chuyển sang sử dụng chức năng JSX

// Load and inject 'style.css' onto the page
import './style.css';

5 kiểu Preact. Tất cả điều này được thực hiện tự động cho bạn. Nếu bạn cần tùy chỉnh hành vi này, hãy cân nhắc thêm plugin @snowpack/plugin-babel để tùy chỉnh toàn bộ trình biên dịch qua Babel

Ghi chú. Bản dựng mặc định của Snowpack không hỗ trợ JSX trong các tệp

// ESM Example - src/user.js
export function getUser() {
  /* .. */
}

// src/index.js
import {getUser} from './user.js';

0/

// ESM Example - src/user.js
export function getUser() {
  /* .. */
}

// src/index.js
import {getUser} from './user.js';

1. Nếu bạn không thể sử dụng phần mở rộng tệp

// Load the JSON object via the default export
import json from './data.json';

2/

// Load the JSON object via the default export
import json from './data.json';

0, bạn có thể sử dụng @snowpack/plugin-babel để xây dựng JavaScript của mình thay thế

JSON

// Load the JSON object via the default export
import json from './data.json';

Snowpack hỗ trợ nhập tệp JSON trực tiếp vào ứng dụng của bạn. Các tệp đã nhập trả về đối tượng JSON đầy đủ trong lần nhập mặc định

CSS

// Load and inject 'style.css' onto the page
import './style.css';

Snowpack hỗ trợ nhập tệp CSS trực tiếp vào ứng dụng của bạn. Các kiểu đã nhập sẽ không xuất, nhưng nhập một kiểu sẽ tự động thêm các kiểu đó vào trang. Điều này hoạt động cho tất cả các tệp CSS theo mặc định và có thể hỗ trợ các ngôn ngữ biên dịch sang CSS như Sass & Ít hơn thông qua các plugin

Nếu bạn không muốn viết CSS, Snowpack cũng hỗ trợ tất cả các thư viện CSS-in-JS phổ biến (ví dụ:. styled-components) để tạo kiểu

Mô-đun CSS

// Load and inject 'style.css' onto the page
import './style.css';

1

Snowpack hỗ trợ các Mô-đun CSS bằng cách sử dụng quy ước đặt tên

// Load and inject 'style.css' onto the page
import './style.css';

10. Giống như bất kỳ tệp CSS nào, việc nhập một tệp sẽ tự động áp dụng CSS đó cho trang. Tuy nhiên, các Mô-đun CSS xuất một đối tượng

// Load and inject 'style.css' onto the page
import './style.css';

11 mặc định đặc biệt để ánh xạ các tên lớp ban đầu của bạn thành các mã định danh duy nhất

Mô-đun CSS giúp bạn thực thi phạm vi thành phần & cách ly trên giao diện người dùng với các tên lớp được tạo duy nhất cho biểu định kiểu của bạn

Các tài sản khác

// Load and inject 'style.css' onto the page
import './style.css';

4

Tất cả các nội dung khác không được đề cập rõ ràng ở trên có thể được nhập qua ESM

// Load and inject 'style.css' onto the page
import './style.css';

0 và sẽ trả về một tham chiếu URL đến nội dung được tạo cuối cùng. Điều này có thể hữu ích khi tham chiếu nội dung không phải JS theo URL, chẳng hạn như tạo phần tử hình ảnh có thuộc tính

// Load and inject 'style.css' onto the page
import './style.css';

13 trỏ đến hình ảnh đó

ĐÃ M

// Load and inject 'style.css' onto the page
import './style.css';

7

Snowpack hỗ trợ tải các tệp WASM trực tiếp vào ứng dụng của bạn bằng API

// Load and inject 'style.css' onto the page
import './style.css';

14 của trình duyệt. Đọc hướng dẫn WASM của chúng tôi để tìm hiểu thêm

Nhập gói NPM

// Load and inject 'style.css' onto the page
import './style.css';

9

Snowpack cho phép bạn nhập các gói npm trực tiếp trong trình duyệt. Ngay cả khi một gói được xuất bản bằng định dạng cũ, Snowpack sẽ chuyển đổi gói đó thành ESM trước khi phân phối nó tới trình duyệt

Khi bạn khởi động máy chủ nhà phát triển của mình hoặc chạy bản dựng mới, bạn có thể thấy thông báo rằng Snowpack đang "cài đặt phụ thuộc". Điều này có nghĩa là Snowpack đang chuyển đổi các phần phụ thuộc của bạn để chạy trên trình duyệt. Điều này chỉ cần chạy một lần hoặc cho đến khi bạn thay đổi cây phụ thuộc tiếp theo bằng cách thêm hoặc xóa các phụ thuộc

Làm cách nào để nhập tệp CSS trong TypeScript?

Bạn có thể sử dụng CSS với TypeScript không?

CSS mô-đun là gì?