Tiếp theo. js cho phép bạn nhập tệp CSS từ tệp JavaScript. Điều này là có thể bởi vì Tiếp theo. js mở rộng khái niệm về
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
2 ngoài JavaScriptNội dung chính Hiển thị
- Thêm biểu định kiểu chung
- Nhập kiểu từ node_modules
- Thêm CSS cấp thành phần
- Hỗ trợ Sass
- Tùy chỉnh tùy chọn Sass
- Biến Sass
- Nó có hoạt động với JavaScript bị tắt không?
Thêm biểu định kiểu chung
Để thêm biểu định kiểu vào ứng dụng của bạn, hãy nhập tệp CSS trong
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
3Ví dụ: xem xét biểu định kiểu sau có tên
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
4body {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}
Tạo tệp
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
3 nếu chưa có. Sau đó, import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
2 tệp import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
4import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
Các kiểu này [
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
4] sẽ áp dụng cho tất cả các trang và thành phần trong ứng dụng của bạn. Do tính chất chung của biểu định kiểu và để tránh xung đột, bạn chỉ có thể nhập chúng bên trong import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
3Trong quá trình phát triển, việc thể hiện biểu định kiểu theo cách này cho phép các kiểu của bạn được tải lại nóng khi bạn chỉnh sửa chúng—nghĩa là bạn có thể giữ nguyên trạng thái của ứng dụng
Trong quá trình sản xuất, tất cả các tệp CSS sẽ tự động được nối thành một tệp
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
00 được rút gọn duy nhấtNhập kiểu từ node_modules
kể từ tiếp theo. js 9. 5. 4, nhập tệp CSS từ
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
01 được cho phép ở bất kỳ đâu trong ứng dụng của bạnĐối với các biểu định kiểu chung, như
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
02 hoặc import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
03, bạn nên nhập tệp bên trong import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
3. Ví dụimport '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
0Để nhập CSS theo yêu cầu của thành phần bên thứ ba, bạn có thể thực hiện việc này trong thành phần của mình. Ví dụ
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
6Thêm CSS cấp thành phần
Tiếp theo. js hỗ trợ các Mô-đun CSS bằng cách sử dụng quy ước đặt tên tệp
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
05Mô-đun CSS phạm vi cục bộ CSS bằng cách tự động tạo một tên lớp duy nhất. Điều này cho phép bạn sử dụng cùng một tên lớp CSS trong các tệp khác nhau mà không lo xung đột
Hành vi này làm cho Mô-đun CSS trở thành cách lý tưởng để bao gồm CSS cấp thành phần. Các tệp Mô-đun CSS có thể được nhập vào bất kỳ đâu trong ứng dụng của bạn
Ví dụ: hãy xem xét một thành phần
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
06 có thể tái sử dụng trong thư mục import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
07Đầu tiên, tạo
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
08 với nội dung sauimport '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
1Sau đó, tạo
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
09, nhập và sử dụng tệp CSS ở trênimport '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
3Mô-đun CSS là một tính năng tùy chọn và chỉ được bật cho các tệp có phần mở rộng
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
60. Các biểu định kiểu import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
61 thông thường và các tệp CSS chung vẫn được hỗ trợTrong quá trình sản xuất, tất cả các tệp Mô-đun CSS sẽ tự động được nối thành nhiều tệp
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
00 được rút gọn và phân tách mã. Các tệp import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
00 này đại diện cho các đường dẫn thực thi nóng trong ứng dụng của bạn, đảm bảo lượng CSS tối thiểu được tải để ứng dụng của bạn vẽHỗ trợ Sass
Tiếp theo. js cho phép bạn nhập Sass bằng cả tiện ích mở rộng
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
64 và import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
65. Bạn có thể sử dụng Sass cấp thành phần thông qua Mô-đun CSS và tiện ích mở rộng import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
66 hoặc import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
67Trước khi bạn có thể sử dụng Tiếp theo. js' tích hợp hỗ trợ Sass, hãy nhớ cài đặt
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
68body {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
'Arial', sans-serif;
padding: 20px 20px 60px;
max-width: 680px;
margin: 0 auto;
}
3Hỗ trợ Sass có các lợi ích và hạn chế giống như hỗ trợ CSS tích hợp được nêu chi tiết ở trên
Ghi chú. Sass hỗ trợ hai cú pháp khác nhau, mỗi cú pháp có phần mở rộng riêng. Tiện ích mở rộng
64 yêu cầu bạn sử dụng cú pháp SCSS, trong khi tiện ích mở rộngimport '../styles.css' // This default export is required in a new `pages/_app.js` file. export default function MyApp[{ Component, pageProps }] { return }
65 yêu cầu bạn sử dụng Cú pháp thụt lề ["Sass"]import '../styles.css' // This default export is required in a new `pages/_app.js` file. export default function MyApp[{ Component, pageProps }] { return }
Nếu bạn không chắc nên chọn cái nào, hãy bắt đầu với tiện ích mở rộng
64, đây là tập hợp siêu CSS và không yêu cầu bạn học Cú pháp thụt lề ["Sass"]import '../styles.css' // This default export is required in a new `pages/_app.js` file. export default function MyApp[{ Component, pageProps }] { return }
Tùy chỉnh tùy chọn Sass
Nếu bạn muốn định cấu hình trình biên dịch Sass, bạn có thể làm như vậy bằng cách sử dụng
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
12 trong import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
13Ví dụ để thêm
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
14import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
0Biến Sass
Tiếp theo. js hỗ trợ các biến Sass được xuất từ tệp Mô-đun CSS
Ví dụ: sử dụng biến
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
15 Sass đã xuấtimport '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
2import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
3CSS-in-JS
ví dụ- JSX được tạo kiểu
- Thành phần theo kiểu
- Cảm xúc
- Linaria
- Tailwind CSS + Cảm xúc
- phong cách
- Cxs
- Aphrodite
- mèo con
- mũi khâu
Có thể sử dụng bất kỳ giải pháp CSS-in-JS hiện có nào. Đơn giản nhất là kiểu nội tuyến
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
0Chúng tôi kết hợp styled-jsx để cung cấp hỗ trợ cho CSS có phạm vi bị cô lập. Mục đích là để hỗ trợ "CSS bóng" tương tự như Thành phần Web, rất tiếc là không hỗ trợ kết xuất máy chủ và chỉ dành cho JS
Xem các ví dụ trên để biết các giải pháp CSS-in-JS phổ biến khác [như Thành phần được tạo kiểu]
Một thành phần sử dụng
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
16 trông như thế nàyimport '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
1Vui lòng xem tài liệu styled-jsx để biết thêm ví dụ
Câu hỏi thường gặp
Nó có hoạt động với JavaScript bị tắt không?
Có, nếu bạn tắt JavaScript, CSS sẽ vẫn được tải trong bản dựng sản xuất [
import '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
17]. Trong quá trình phát triển, chúng tôi yêu cầu phải bật JavaScript để cung cấp trải nghiệm tốt nhất cho nhà phát triển với Làm mới nhanh