Thiết lập dự án này sử dụng webpack để xử lý tất cả nội dung. webpack cung cấp một cách tùy chỉnh để “mở rộng” khái niệm về import
ngoài JavaScript. Để thể hiện rằng tệp JavaScript phụ thuộc vào tệp CSS, bạn cần nhập CSS từ tệp JavaScript
Button.css
.Button {
padding: 20px;
}
Bản saoimport React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render[] {
// You can use them as regular CSS styles
return ;
}
}
0
import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render[] {
// You can use them as regular CSS styles
return ;
}
}
import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render[] {
// You can use them as regular CSS styles
return ;
}
}
Bản saoĐiều này không bắt buộc đối với React nhưng nhiều người thấy tính năng này tiện lợi. Bạn có thể đọc về những lợi ích của phương pháp này tại đây. Tuy nhiên, bạn nên lưu ý rằng điều này làm cho mã của bạn ít di động hơn đối với các công cụ và môi trường xây dựng khác so với webpack
Trong quá trình phát triển, việc thể hiện các phụ thuộc theo cách này cho phép các kiểu của bạn được tải lại nhanh chóng khi bạn chỉnh sửa chúng. Trong quá trình sản xuất, tất cả các tệp CSS sẽ được nối thành một tệp
import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render[] {
// You can use them as regular CSS styles
return ;
}
}
1 được rút gọn duy nhất trong đầu ra của bản dựngNếu bạn lo lắng về việc sử dụng ngữ nghĩa dành riêng cho webpack, bạn có thể đặt tất cả CSS của mình ngay vào
import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render[] {
// You can use them as regular CSS styles
return ;
}
}
2. Nó vẫn sẽ được nhập từ import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render[] {
// You can use them as regular CSS styles
return ;
}
}
3, nhưng bạn luôn có thể xóa quá trình nhập đó nếu sau này bạn chuyển sang một công cụ xây dựng khác Các trình khởi động ứng dụng React phổ biến như Tạo ứng dụng React và Tiếp theo. js đã hỗ trợ nhập CSS bên trong tệp JavaScript
CSS trong Tạo ứng dụng React
Trong Tạo ứng dụng React, tất cả những gì bạn cần làm là viết CSS và nhập nó một lần vào bên trong ứng dụng của bạn
Ví dụ: hãy tạo một tệp
import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render[] {
// You can use them as regular CSS styles
return ;
}
}
1 có tên import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render[] {
// You can use them as regular CSS styles
return ;
}
}
5.App {
font-family: sans-serif;
text-align: center;
}
.hello {
color: blue;
}
Tiếp theo, viết một tệp
import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render[] {
// You can use them as regular CSS styles
return ;
}
}
6 và viết một thành phần React đơn giản với các lớpimport React from "react";
export default function App[] {
return [
Hello World! My name is John
];
}
Cuối cùng, viết một tệp
import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render[] {
// You can use them as regular CSS styles
return ;
}
}
7 nơi bạn nhập thành phần và hiển thị nó vào DOM. Bạn cũng cần nhập tệp CSS ở đâyimport React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import App from "./App";
const rootElement = document.getElementById["root"];
ReactDOM.render[
,
rootElement
];
Và bạn sẽ thấy văn bản
import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render[] {
// You can use them as regular CSS styles
return ;
}
}
8 sẽ có màu xanh lam mặc dù bạn không nhập CSS trực tiếp vào thành phần. Trong bản dựng sản xuất, tất cả các tệp CSS đã nhập sẽ được nối thành một tệp CSS được rút gọn duy nhất và được nhập vào ứng dụng trong tệp import React, { Component } from 'react';
import './Button.css'; // Tell webpack that Button.js uses these styles
class Button extends Component {
render[] {
// You can use them as regular CSS styles
return ;
}
}
9CSS trong Tiếp theo. js
Giống như CRA, Next. js đã có sẵn hỗ trợ cho CSS. Sự khác biệt duy nhất là nơi bạn cần nhập tệp. Để thêm một tệp CSS chung vào Tiếp theo của bạn. js, bạn cần nhập tệp bên trong tệp
import React from "react";
export default function App[] {
return [
Hello World! My name is John
];
}
0Tệp
import React from "react";
export default function App[] {
return [
Hello World! My name is John
];
}
1 sẽ ghi đè thành phần mặc định trong đó Tiếp theo. js hiển thị các trang của bạn. Đó là lý do tại sao đây là nơi lý tưởng để nhập tệp CSS toàn cầuimport '../styles.css'
// This default export is required in a new `pages/_app.js` file.
export default function MyApp[{ Component, pageProps }] {
return
}
Để biết thêm thông tin, vui lòng truy cập Tiếp theo. tài liệu js cho CSS tại đây
Điều gì về bản soạn sẵn tùy chỉnh?
Bây giờ nếu bạn không sử dụng Create React App hoặc Next. js, thì bạn phải định cấu hình trình tải Kiểu và CSS trong gói mô-đun của mình
Nó sẽ khác nhau đối với mỗi gói, nhưng nếu bạn sử dụng Webpack, bạn có thể làm theo ví dụ soạn sẵn này mà tôi đã tạo trước đây