2017-06-28 20 views
6

tạo các-phản ứng ứng dụng bắt đầu cho bạn một App.js trông như thế này:CSS liên kết trong tạo-phản ứng ứng dụng

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>Welcome to React</h2> 
     </div> 
     <p className="App-intro"> 
      To get started, edit <code>src/App.js</code> and save to reload. 
     </p> 
     </div> 
    ); 
    } 
} 

export default App; 

Note import './App.css' - một nhập ẩn danh của file CSS này. App.css có các lớp CSS như AppApp-header sau đó được tham chiếu theo chuỗi trong phương thức render của thành phần React. Liên kết ma thuật này xảy ra như thế nào? Đây có phải là một hàm của gói npm-loader npm không? Nếu vậy, chức năng này được ghi lại ở đâu? Tôi đã đẩy ứng dụng ra để kiểm tra cấu hình Webpack, nhưng không thể đặt ngón tay của tôi vào cách liên kết này xảy ra.

Trả lời

4

Theo số create-react-app README, nhập css được xử lý bởi plugin Webpack.

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 nhập khẩu ngoài JavaScript. Để thể hiện rằng tệp JavaScript phụ thuộc vào tệp CSS, bạn cần phải nhập CSS từ tệp JavaScript ... bạn nên lưu ý rằng điều này làm cho mã của bạn kém 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.

Hệ thống xây dựng của dự án được tạo bằng ứng dụng tạo phản ứng được tìm thấy trong gói khác có tên react-scripts. package.json của dự án này includes a dependency trên css-loader, có vẻ như là plugin được sử dụng để cho phép nhập css.

0

Nếu bạn đang sử dụng ứng dụng tạo phản ứng, thì theo hiểu biết của tôi, tất cả các phép thuật sẽ xảy ra trong mô-đun phản ứng-script được cài đặt và chạy khi bạn bắt đầu.

Các vấn đề liên quan