Bỏ qua lớp css

Các mô-đun CSS phản ứng thực hiện ánh xạ tự động các mô-đun CSS. Mỗi lớp CSS được gán một mã định danh phạm vi cục bộ với một tên duy nhất toàn cầu. Mô-đun CSS cho phép CSS mô-đun và có thể tái sử dụng

⚠️⚠️⚠️THÔNG BÁO NGỪNG SỬ DỤNG⚠️⚠️⚠️

Nếu bạn đang cân nhắc sử dụng

4, hãy đánh giá xem

5 có bao gồm trường hợp sử dụng của bạn không.

5 là một thay thế nhẹ của

4

5 không phải là sự thay thế tạm thời và không bao gồm tất cả các trường hợp sử dụng của

4. Tuy nhiên, nó có chi phí hoạt động nhỏ hơn nhiều [0-10% so với +50%; xem Hiệu suất] và dấu chân kích thước nhỏ hơn nhiều [dưới 2kb so với +17kb]

Nó rất dễ dàng để bắt đầu. Xem bản demo https. //github. com/gajus/babel-plugin-react-css-modules/tree/master/demo

• Mô-đun CSS
  • gói web

    {
        test: /\.css$/,
        loaders: [
            'style-loader?sourceMap',
            'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
        ]
    }

    0
• Vấn đề là gì?
• Việc thực hiện
• Cách sử dụng
  • Gói mô-đun
    • gói web
      • Phát triển
      • Sản lượng
    • trình duyệt
  • Mở rộng các kiểu thành phần

  • {
        test: /\.css$/,
        loaders: [
            'style-loader?sourceMap',
            'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
        ]
    }

    1 Tài sản
  • Vòng lặp và các thành phần con
  • Người trang trí
  • Tùy chọn

    • {
          test: /\.css$/,
          loaders: [
              'style-loader?sourceMap',
              'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
          ]
      }

      2

    • {
          test: /\.css$/,
          loaders: [
              'style-loader?sourceMap',
              'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
          ]
      }

      3
• SASS, SCSS, LESS và các Bộ tiền xử lý CSS khác
  • Bật bản đồ nguồn
• thành phần lớp
  • Thành Phần Lớp Học Giải Quyết Những Vấn Đề Gì?
  • Thành phần lớp sử dụng bộ tiền xử lý CSS
• CSS toàn cầu
• Nhiều mô-đun CSS

Mô-đun CSS

Mô-đun CSS thật tuyệt vời. Nếu bạn không quen thuộc với Mô-đun CSS, thì đó là khái niệm sử dụng gói mô-đun chẳng hạn như webpack để tải CSS trong phạm vi một tài liệu cụ thể. Trình tải mô-đun CSS sẽ tạo một tên duy nhất cho mỗi lớp CSS tại thời điểm tải tài liệu CSS [chính xác là CSS có thể tương tác]. Để xem các Mô-đun CSS trong thực tế, webpack-demo

Trong ngữ cảnh của React, các Mô-đun CSS trông như thế này

0

Kết xuất thành phần sẽ tạo ra một đánh dấu tương tự như

1

và một tệp CSS tương ứng khớp với các lớp CSS đó

Thật tuyệt vời

gói web

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

0

Mô-đun CSS là một đặc điểm kỹ thuật có thể được triển khai theo nhiều cách.

4 tận dụng trình tải css webpack triển khai Mô-đun CSS hiện có

Vấn đề là gì?

bản thân webpack css-loader có một số nhược điểm

• Bạn phải sử dụng tên lớp CSS

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  6
• Bạn phải sử dụng đối tượng

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  1 bất cứ khi nào xây dựng một

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  8
• Trộn các Mô-đun CSS và các lớp CSS toàn cầu rất cồng kềnh
• Tham chiếu đến Mô-đun CSS không xác định sẽ phân giải thành

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  9 mà không có cảnh báo

Thành phần Mô-đun CSS React tự động tải các Mô-đun CSS bằng cách sử dụng thuộc tính

80, e. g

9

Sử dụng

4

• Bạn không bắt buộc phải sử dụng quy ước đặt tên

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  6
• Bạn không cần tham khảo đối tượng

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  1 mỗi khi sử dụng Mô-đun CSS
• Có sự phân biệt rõ ràng giữa CSS toàn cầu và Mô-đun CSS, e. g

• Bạn được cảnh báo khi
  80 đề cập đến một Mô-đun CSS không xác định [tùy chọn

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  3]
• Bạn có thể bắt buộc sử dụng một mô-đun CSS duy nhất cho mỗi
  86 [tùy chọn

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  2]

Việc thực hiện

4 mở rộng phương thức

89 của thành phần đích. Nó sẽ sử dụng giá trị của

80 để tìm các Mô-đun CSS trong đối tượng kiểu được liên kết và sẽ nối các tên lớp CSS duy nhất phù hợp với giá trị thuộc tính

86

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

8

Thật tuyệt vời

Cách sử dụng

thiết lập bao gồm

• Thiết lập gói mô-đun để tải CSS có thể tương tác
• Trang trí thành phần của bạn bằng cách sử dụng
  4

Gói mô-đun

gói web

Phát triển

Trong môi trường phát triển, bạn muốn Bật Sourcemaps và webpack Hot Module Replace [HMR].

44 đã hỗ trợ HMR. Do đó, Thay thế mô-đun nóng sẽ hoạt động ngay lập tức

Cài đặt

• Cài đặt
  44
• Cài đặt

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  0
• Thiết lập trình tải
  47

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

Sản lượng

Trong môi trường sản xuất, bạn muốn trích xuất các đoạn CSS thành một tệp biểu định kiểu duy nhất

Thuận lợi

• Ít thẻ kiểu hơn [IE cũ hơn có giới hạn]
• CSS SourceMap [với
  48 và
  49]
• CSS được yêu cầu song song
• Bộ đệm CSS riêng biệt
• Thời gian chạy nhanh hơn [ít mã và thao tác DOM hơn]

Hãy cẩn thận

• Yêu cầu HTTP bổ sung
• Thời gian biên dịch lâu hơn
• Cấu hình phức tạp hơn
• Không sửa đổi đường dẫn công cộng thời gian chạy
• Không thay thế mô-đun nóng

– extract-text-webpack-plugin

Cài đặt

• Cài đặt

  44

• Cài đặt

  {
      test: /\.css$/,
      loaders: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
      ]
  }

  0

• Sử dụng

  32 để trích xuất các đoạn CSS thành một biểu định kiểu duy nhất

• Thiết lập trình tải

  47

  • ExtractTextPlugin v1x

    8

  • ExtractTextPlugin v2x

    4

• Cài đặt plugin

  32

  • ExtractTextPlugin v1x

    3

  • ExtractTextPlugin v2x

    9

Tham khảo webpack-demo hoặc Reac-css-modules-examples để biết ví dụ về thiết lập hoàn chỉnh

trình duyệt

Tham khảo

35

Mở rộng các kiểu thành phần

Sử dụng thuộc tính

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1 để ghi đè lên các kiểu thành phần mặc định

Giải thích sử dụng thành phần

37

9

Trong ví dụ này,

38 được sử dụng để trang trí thành phần

37 bằng Mô-đun CSS

90. Khi thành phần

37 được hiển thị, nó sẽ sử dụng các thuộc tính của đối tượng

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1 để xây dựng các giá trị

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

8

Sử dụng thuộc tính

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1, bạn có thể ghi đè lên đối tượng thành phần mặc định

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1, e. g

10

CSS có thể tương tác có thể mở rộng ICSS khác. Sử dụng tính năng này để mở rộng các kiểu mặc định, e. g

11

Trong ví dụ này,

96 mở rộng có chọn lọc

97 [kiểu mặc định của thành phần

37]

Tham khảo ví dụ

99 để biết ví dụ về triển khai đang hoạt động

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1 Tài sản

Các thành phần được trang trí kế thừa thuộc tính

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1 mô tả ánh xạ giữa các mô-đun CSS và các lớp CSS

12

Trong ví dụ trên,

92 và

93 là tương đương

Thuộc tính

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1 được thiết kế để cho phép trang trí thành phần của Vòng lặp và Thành phần con

Vòng lặp và các thành phần con

Không thể sử dụng

80 để xác định kiểu của một

86 sẽ được tạo bởi một thành phần khác, e. g

13

Ví dụ trên sẽ không hoạt động.

38 được sử dụng để trang trí thành phần

98. Tuy nhiên, chính thành phần

99 sẽ hiển thị

100

Vì mục đích đó, thành phần được trang trí kế thừa thuộc tính

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

1 mà bạn có thể sử dụng như một đối tượng Mô-đun CSS thông thường. Do đó, ví dụ trước đó có thể được viết lại thành

14

Bạn có thể sử dụng thuộc tính

80 trong thành phần con nếu bạn trang trí thành phần con bằng cách sử dụng

38 trước khi chuyển nó tới thành phần hiển thị, e. g

15

Người trang trí

16

Bạn cần trang trí thành phần của mình bằng cách sử dụng

4, e. g

9

Đó là nó

Đúng như tên gọi,

4 tương thích với cú pháp của trình trang trí ES7

18

Thật tuyệt vời

Tham khảo kho lưu trữ ví dụ về mô-đun phản ứng css để biết ví dụ về thiết lập webpack

Tùy chọn

Các tùy chọn được cung cấp dưới dạng tham số thứ ba cho hàm

38

19

hoặc như một tham số thứ hai cho trình trang trí

90

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

2

Mặc định.

108

Cho phép nhiều tên Mô-đun CSS

Khi

108, điều sau đây sẽ gây ra lỗi

91

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

3

Mặc định.

111

Xác định hành động mong muốn khi không thể ánh xạ

80 tới Mô-đun CSS hiện có

Tùy chọn có sẵn

• 111 đưa ra lỗi

• 114 ghi cảnh báo bằng cách sử dụng
  115

• 116 âm thầm bỏ qua tên phong cách còn thiếu

SASS, SCSS, LESS và các Bộ tiền xử lý CSS khác

CSS có thể tương tác tương thích với bộ tiền xử lý CSS. Để sử dụng bộ tiền xử lý, tất cả những gì bạn cần làm là thêm bộ tiền xử lý vào chuỗi trình tải, e. g. trong trường hợp webpack, đơn giản như cài đặt

117 và thêm

118 vào cuối truy vấn trình tải

44 [trình tải được xử lý từ phải sang trái]

92

Bật bản đồ nguồn

Để bật CSS Source maps, hãy thêm tham số

120 vào css-loader và vào

117

93

thành phần lớp

Mô-đun CSS thúc đẩy mẫu sáng tác, tôi. e. mọi Mô-đun CSS được sử dụng trong một thành phần phải xác định tất cả các thuộc tính cần thiết để mô tả một thành phần, chẳng hạn như. g

94

Thành phần thúc đẩy phân tách đánh dấu và kiểu tốt hơn bằng cách sử dụng ngữ nghĩa khó đạt được nếu không có Mô-đun CSS

Vì tên Mô-đun CSS là cục bộ nên bạn hoàn toàn có thể sử dụng các tên kiểu chung như "trống" hoặc "đầy đủ", không có tiền tố "hộp-"

Để tìm hiểu thêm về cách soạn các quy tắc CSS, tôi khuyên bạn nên đọc bài viết của Glen Maddern về Mô-đun CSS và thông số chính thức của Mô-đun CSS

Thành Phần Lớp Học Giải Quyết Những Vấn Đề Gì?

Xem xét ví dụ tương tự trong CSS và HTML

95

96

Mô hình này nổi lên với sự ra đời của OOCSS. Nhược điểm lớn nhất của việc triển khai này là bạn sẽ cần thay đổi HTML hầu như mỗi khi bạn muốn thay đổi kiểu

Thành phần lớp sử dụng bộ tiền xử lý CSS

Phần này của tài liệu được đưa vào như một bài tập học tập để mở rộng sự hiểu biết về nguồn gốc của Thành Phần Lớp. Mô-đun CSS hỗ trợ một phương pháp soạn thảo Mô-đun CSS riêng bằng cách sử dụng từ khóa

122. Bộ tiền xử lý CSS không bắt buộc

Bạn có thể viết các tác phẩm trong SCSS bằng cách sử dụng từ khóa

123 và sử dụng Chỉ thị Mixin, e. g

Sử dụng

123

97

Điều này có nghĩa là

98

sử dụng mixin

99

Điều này có nghĩa là

0

CSS toàn cầu

Mô-đun CSS không hạn chế bạn sử dụng CSS toàn cầu

1

Tuy nhiên, hãy thận trọng khi sử dụng CSS toàn cầu. Với Mô-đun CSS, chỉ có một số trường hợp sử dụng hợp lệ cho CSS toàn cầu [e. g. bình thường hóa]

Nhiều mô-đun CSS

Tránh sử dụng nhiều Mô-đun CSS để mô tả một phần tử. Đọc về Thành Phần Lớp Học

Điều đó nói rằng, nếu bạn yêu cầu sử dụng nhiều Mô-đun CSS để mô tả một phần tử, hãy bật tùy chọn

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

2. Khi nhiều Mô-đun CSS được sử dụng để mô tả một phần tử,

4 sẽ nối thêm một tên lớp duy nhất cho mọi Mô-đun CSS mà nó khớp trong khai báo

80, e. g