programming css

Module.css không hoạt động

Một trong những điều đầu tiên bạn cần cấu hình trong dự án webpack của mình là CSS. CSS rất cơ bản đối với một ứng dụng web — hầu như tất cả các ứng dụng web đều cần nó. Nhưng việc định cấu hình webpack rất phức tạp. Và nếu bạn muốn các mô-đun CSS và CSS, điều đó có thể còn khó hiểu hơn nữa. Trong bài viết này, tôi sắp xếp tất cả cho bạn

Bạn sẽ học được những điều sau đây trong bài đăng này

Cách định cấu hình CSS cơ bản trong dự án webpack bằng

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

0 và

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

Cách trích xuất CSS thành tệp

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

2 của chính nó

Cách định cấu hình các mô-đun CSS với webpack
Cách định cấu hình cả mô-đun CSS và CSS

Hãy bắt đầu cấu hình CSS. Tôi cho rằng bạn đã thiết lập một dự án webpack. Nếu không, hãy xem createapp. nhà phát triển để tạo bản soạn sẵn gói webpack tùy chỉnh của riêng bạn

Tạo tệp CSS và tham chiếu nó

Trước khi chúng tôi định cấu hình hỗ trợ CSS trong thiết lập webpack, trước tiên hãy thêm tệp CSS và sử dụng nó

Điều đầu tiên chúng ta sẽ làm là thêm một tệp

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

3 vào dự án. Hãy đặt nó vào thư mục

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

body {
  color: white;
  background-color: black;
}

Tệp CSS này tạo nền đen và màu chữ trắng. Điều này cho thấy rõ nó có hoạt động hay không - nếu nó hoạt động thì toàn bộ trang sẽ có màu đen

Điều tiếp theo cần làm là nhập nó. Chúng ta sẽ thực hiện việc này từ một tệp JavaScript vì theo mặc định, webpack đặt CSS bên trong gói, điều đó có nghĩa là chúng ta phải tham chiếu nó từ một tệp JavaScript khác [chúng ta sẽ xem xét cách trích xuất CSS sang tệp của chính nó sau trong hướng dẫn này]

Đặt cái này vào tệp

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

5 của bạn

Cấu hình webpack css-loader và style-loader

Để có thể sử dụng CSS trong ứng dụng webpack của bạn, bạn cần thiết lập một. Gói ngoài hộp, webpack chỉ hiểu Javascript và JSON. Với trình tải, bạn có thể dịch một loại tệp khác sang định dạng mà webpack hiểu và có thể hoạt động với

Có nhiều trình tải webpack và mỗi trình tải có một mục đích cụ thể. Bạn cần hai trình tải để hỗ trợ CSS trong ứng dụng của mình.

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

1 và

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

0. Hãy xem cách chúng ta có thể cấu hình

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

1 và

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

0 trong webpack

Bạn thiết lập trình tải với từ khóa

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

10 trong

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

11 của mình

Đây là cách bạn định cấu hình CSS trong

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

11 của mình

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

Từ khóa

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

13 cho webpack biết loại tệp nào nên sử dụng trình tải này. Từ khóa

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

14 cho webpack biết trình tải nào sẽ được chạy cho các tệp này

Như bạn có thể thấy trong phần cấu hình, bạn cần sử dụng hai bộ tải,

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

0 và

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

1. Bạn cũng cần cài đặt chúng dưới dạng phụ thuộc NPM

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

css-loader và style-loader làm gì?

Trình tải chỉ là các hàm JavaScript thuần túy. họ lấy một số dữ liệu làm đầu vào và thực hiện điều gì đó với dữ liệu đó và trả về một phiên bản đã chuyển đổi của dữ liệu. Khi bạn sử dụng hai bộ tải trong webpack thì nó sẽ lấy đầu ra của cái đầu tiên và gửi nó làm đầu vào cho cái thứ hai. Trong ví dụ của chúng tôi, nó lấy tệp CSS và chạy nó qua

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

1, sau đó nó lấy đầu ra và chạy nó làm đầu vào cho

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

Hãy xem những gì bộ nạp làm

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

1 đọc CSS từ tệp CSS và trả về CSS với

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

30 và

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

31 được giải quyết chính xác. Điều đó nghĩa là gì? . Giả sử bạn có một

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

32 trong CSS tham chiếu đến một tài nguyên khác, chẳng hạn như một hình ảnh

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

Trong ví dụ này, chúng tôi tham khảo

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

33 từ CSS. Khi

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

1 nhìn thấy dòng này, nó sẽ báo cho webpack tải tệp này bằng trình tải thích hợp. Để điều này hoạt động, bạn cũng cần định cấu hình trình tải SVG, vì tệp là tệp SVG

Để tải các tệp SVG, chúng tôi sử dụng trình tải tệp webpack

Nếu bạn chưa định cấu hình

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

1, bạn sẽ gặp lỗi khó hiểu như thế này

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

Bạn sẽ gặp lỗi này mặc dù bạn đã định cấu hình trình tải cho các tệp SVG. Tránh các lỗi kỳ lạ như thế bằng cách luôn sử dụng

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

1 cho cấu hình CSS của bạn

Trình tải tiếp theo bạn đã định cấu hình là

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

0. Trình tải này thêm CSS vào DOM để các kiểu hoạt động và hiển thị trên trang. Điều này là cần thiết vì CSS được đưa vào tệp

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

38 - không có tệp

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

3 riêng biệt

Có thể xuất một tệp

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

3 riêng biệt bằng cách sử dụng mini-css-extract-plugin thay vì sử dụng

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

0 như chúng tôi đã làm trước đây

Điều đầu tiên bạn cần làm là cài đặt phụ thuộc

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

Sau đó, bạn cần nhập plugin ở đầu

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

Điều tiếp theo là kích hoạt plugin trong phần plugin của tệp

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

11 của bạn

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

Và cuối cùng nhưng không kém phần quan trọng, bạn thay thế

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

0 bằng

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

Bây giờ khi bạn chạy webpack, nó sẽ xuất ra tệp

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

06 trong thư mục dist mà bạn có thể tham khảo từ tệp

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

07 của mình. [xóa dòng

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

08 khỏi

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

5 nếu bạn đã thêm dòng đó]

Bây giờ bạn đã biết cách định cấu hình CSS thuần túy, hãy xem cách định cấu hình các mô-đun CSS trong webpack

Nhưng trước tiên, các mô-đun CSS là gì?

"Mô-đun CSS là một tệp CSS trong đó tất cả các tên lớp và tên hoạt hình được đặt trong phạm vi cục bộ theo mặc định. "

CSS là toàn cầu - các lớp bạn xác định có thể được sử dụng ở mọi nơi. Nhưng các mô-đun CSS được đặt trong phạm vi thành phần mà chúng được sử dụng

thủ thuật CSS. com có một bài giới thiệu khá hay về Mô-đun CSS rất hữu ích nếu bạn muốn tìm hiểu thêm. Trong bài đăng này, chúng tôi sẽ tập trung vào việc tìm hiểu cách định cấu hình nó

Định cấu hình các mô-đun CSS khá giống với định cấu hình CSS

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

bạn vẫn sử dụng

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

1 và

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

0. Không phụ thuộc thêm là cần thiết. Nhưng sự khác biệt để định cấu hình CSS là bạn thêm hai tùy chọn vào

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

Đó là

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

73 yêu cầu

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

1 kích hoạt các mô-đun CSS

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

75 có nghĩa là nó cũng áp dụng các mô-đun CSS trên các tài nguyên

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

76ed

Sử dụng đồng thời cả Mô-đun CSS và CSS toàn cầu

Vì vậy, cách để kích hoạt các mô-đun CSS là chuyển một số tùy chọn cho

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

1. Nhưng nếu chúng ta muốn sử dụng cả mô-đun CSS và CSS thì sao?. Giả sử bạn có tệp ________ 378 thực sự là CSS toàn cầu. Hoặc bạn sử dụng thành phần của bên thứ ba phụ thuộc vào CSS toàn cầu. Nó có thể làm được

Chúng tôi cần một quy ước để sử dụng để quyết định tệp nào là CSS toàn cầu và tệp nào là mô-đun CSS. Cách tôi muốn làm là chỉ sử dụng các mô-đun CSS cho các tệp kết thúc bằng

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

79, ví dụ như

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

90 và tất cả các tệp

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

91 khác là toàn cầu

Để định cấu hình, chúng tôi sẽ thêm hai trình tải vào cấu hình webpack của chúng tôi. một cho CSS và một cho các mô-đun CSS và chúng tôi sẽ sử dụng các từ khóa

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

92 và

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

93 để tách hai. ________ 392 và _______ 393 nhận một biểu thức chính quy quyết định xem tệp có nên được sử dụng hay không. Thiết lập hoàn chỉnh trông như thế này

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }

Bây giờ bạn có thể sử dụng cả CSS và mô-đun CSS trong dự án của mình

Theo dõi tôi trên Twitter để nhận thông tin cập nhật theo thời gian thực về các mẹo, thông tin chi tiết và những thứ tôi xây dựng trong hệ sinh thái giao diện người dùng

Làm cách nào để sử dụng CSS mô-đun trong React js?

Sử dụng mô-đun CSS .

Tạo một tệp với. mô-đun. css làm phần mở rộng

Nhập mô-đun đó vào ứng dụng React [như chúng ta đã thấy trước đó]

Thêm một tên lớp vào một phần tử hoặc thành phần và tham chiếu kiểu cụ thể từ các kiểu đã nhập

Tại sao CSS không hoạt động trong React?

Lỗi này được tạo ra bởi vì trình biên dịch chỉ có thể nhập tệp từ thư mục src . Ở đây file CSS được lưu ngoài thư mục src nên trình biên dịch không import được. Để mã này hoạt động, bạn chỉ cần lưu tệp CSS bên trong thư mục src.

Tại sao nên sử dụng CSS mô-đun trong React?

Nó làm giảm phạm vi toàn cầu của phong cách React. Ngoài ra, nó là một công cụ ngăn chặn phạm vi toàn cầu và xung đột bằng cách tạo một chuỗi ngẫu nhiên dưới dạng tên className và thêm một hàm băm duy nhất để làm cho mỗi className trở nên độc nhất. Chúng ta có thể ngăn xung đột không gian tên cho các lớp CSS bằng cách sử dụng Mô-đun CSS

CSS mô-đun là gì?

Mô-đun CSS là tệp CSS trong đó tất cả tên lớp và tên hoạt ảnh được đặt trong phạm vi cục bộ theo mặc định . Mô-đun CSS cho phép bạn viết kiểu trong tệp CSS nhưng sử dụng chúng dưới dạng đối tượng JavaScript để xử lý bổ sung và đảm bảo an toàn.

Tạo tệp CSS và tham chiếu nó

Cấu hình webpack css-loader và style-loader

css-loader và style-loader làm gì?

Sử dụng đồng thời cả Mô-đun CSS và CSS toàn cầu

Làm cách nào để sử dụng CSS mô-đun trong React js?

Tại sao CSS không hoạt động trong React?

Tại sao nên sử dụng CSS mô-đun trong React?

CSS mô-đun là gì?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề