Tiện ích mở rộng PostCSS

từ chối trách nhiệm. postcss-loader là gói của bên thứ ba do các thành viên cộng đồng duy trì, gói này có thể không có hỗ trợ, chính sách bảo mật hoặc giấy phép giống như gói webpack và gói này không được webpack duy trì

trò chuyện trên webpack.

Trò chuyện PostCSS.

Trình tải để xử lý CSS với

import css from "file.css";

5

Bắt đầu

Bạn cần webpack v5 để sử dụng phiên bản mới nhất. Đối với Webpack v4, bạn phải cài đặt postcss-loader v4

Để bắt đầu, bạn cần cài đặt

import css from "file.css";

6 và

import css from "file.css";

7

npm install --save-dev postcss-loader postcss

hoặc

yarn add -D postcss-loader postcss

hoặc

pnpm add -D postcss-loader postcss

Sau đó thêm plugin vào cấu hình

import css from "file.css";

8 của bạn. Ví dụ

Trong cấu hình sau, plugin

import css from "file.css";

9 được sử dụng, không được cài đặt theo mặc định

tập tin. js

import css from "file.css";

gói web. cấu hình. js

Sử dụng thay thế với

postcss. cấu hình. js

Trình tải tự động tìm kiếm các tệp cấu hình

gói web. cấu hình. js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

Và chạy

import css from "file.css";

8 thông qua phương pháp ưa thích của bạn

Tùy chọn

module.exports = { module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader", "postcss-loader"], }, ], }, };1

Loại

import css from "file.css";

2

Mặc định.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

2

Kích hoạt hỗ trợ Trình phân tích cú pháp PostCSS trong

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

3. Nếu bạn sử dụng kiểu JS trình phân tích cú pháp

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

4, hãy thêm tùy chọn

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

1

gói web. cấu hình. js

import css from "file.css";

7

module.exports = { module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader", "postcss-loader"], }, ], }, };6

Loại

import css from "file.css";

9

Mặc định.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

2

Cho phép thiết lập và plugin

Tất cả các tùy chọn

import css from "file.css";

5 đều được hỗ trợ. Có tùy chọn

import css from "file.css";

20 đặc biệt cho các tệp cấu hình. Cách thức hoạt động và cách cấu hình được mô tả bên dưới

Chúng tôi khuyên bạn không nên chỉ định các tùy chọn

import css from "file.css";

21,

import css from "file.css";

22 và

import css from "file.css";

23 vì điều này có thể dẫn đến sai đường dẫn trong bản đồ nguồn. Nếu bạn cần bản đồ nguồn, vui lòng sử dụng tùy chọn

import css from "file.css";

25

Thiết lập

import css from "file.css";

26

gói web. cấu hình. js (khuyên dùng)

gói web. cấu hình. js (không dùng nữa, sẽ bị xóa trong bản phát hành chính tiếp theo)

import css from "file.css";

8

Thiết lập

import css from "file.css";

27

gói web. cấu hình. js

Thiết lập

import css from "file.css";

28

gói web. cấu hình. js

Thiết lập

import css from "file.css";

29

gói web. cấu hình. js

import css from "file.css";

70

gói web. cấu hình. js

npm install --save-dev postcss-loader postcss

3

import css from "file.css";

20

Loại

yarn add -D postcss-loader postcss

0

Mặc định.

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

2

Cho phép đặt tùy chọn bằng tệp cấu hình. Các tùy chọn được chỉ định trong tệp cấu hình được kết hợp với các tùy chọn được chuyển đến trình tải, các tùy chọn của trình tải sẽ ghi đè lên các tùy chọn từ cấu hình

Tập tin cấu hình

Trình tải sẽ tìm kiếm cấu hình trên cây thư mục ở những nơi sau

• một tài sản

  import css from "file.css";

  7 trong

  import css from "file.css";

  74
• một tệp

  import css from "file.css";

  75 ở định dạng JSON hoặc YAML
• tệp

  import css from "file.css";

  76,

  import css from "file.css";

  77,

  import css from "file.css";

  78,

  import css from "file.css";

  79 hoặc

  import css from "file.css";

  90
• một mô-đun CommonJS

  import css from "file.css";

  91 hoặc

  import css from "file.css";

  92 xuất một đối tượng (được khuyến nghị)

Ví dụ về tệp cấu hình

Sử dụng ký hiệu

import css from "file.css";

25

postcss. cấu hình. js (khuyên dùng)

Sử dụng ký hiệu

import css from "file.css";

70

postcss. cấu hình. js (khuyên dùng)

postcss. cấu hình. js (không dùng nữa, sẽ bị xóa trong bản phát hành chính tiếp theo)

tầng cấu hình

Bạn có thể sử dụng các tệp

import css from "file.css";

91 khác nhau trong các thư mục khác nhau. Tra cứu cấu hình bắt đầu từ

import css from "file.css";

96 và di chuyển cây tệp lên trên cho đến khi tìm thấy tệp cấu hình

yarn add -D postcss-loader postcss

1

Sau khi thiết lập

import css from "file.css";

91 của bạn, hãy thêm

import css from "file.css";

6 vào

import css from "file.css";

99 của bạn. Bạn có thể sử dụng nó độc lập hoặc kết hợp với

import css from "file.css";

80 (được khuyến nghị)

Sử dụng nó trước

import css from "file.css";

80 và

import css from "file.css";

82, nhưng sau các trình tải tiền xử lý khác như e. g

import css from "file.css";

83, nếu bạn sử dụng bất kỳ (kể từ)

gói web. cấu hình. js (khuyên dùng)

yarn add -D postcss-loader postcss

2

import css from "file.css";

84

Bật/Tắt cấu hình tự động tải

gói web. cấu hình. js

yarn add -D postcss-loader postcss

3

Chuỗi

Cho phép chỉ định đường dẫn đến tệp cấu hình

gói web. cấu hình. js

yarn add -D postcss-loader postcss

4

import css from "file.css";85

Loại

yarn add -D postcss-loader postcss

5

Mặc định. phụ thuộc vào giá trị

import css from "file.css";

86

Theo mặc định, việc tạo bản đồ nguồn phụ thuộc vào tùy chọn

import css from "file.css";

87. Tất cả các giá trị cho phép tạo bản đồ nguồn ngoại trừ giá trị

import css from "file.css";

88 và

import css from "file.css";

89

gói web. cấu hình. js

yarn add -D postcss-loader postcss

6

thiết lập thay thế

gói web. cấu hình. js

yarn add -D postcss-loader postcss

7

npm install --save-dev postcss-loader postcss 30

Loại

yarn add -D postcss-loader postcss

8

loại

npm install --save-dev postcss-loader postcss

30 phải giống với postcss. d. ts

Mặc định.

import css from "file.css";

7

Tùy chọn

npm install --save-dev postcss-loader postcss

30 đặc biệt xác định việc triển khai PostCSS nào sẽ được sử dụng. Ghi đè phiên bản

npm install --save-dev postcss-loader postcss

34 được cài đặt cục bộ của

import css from "file.css";

7

Tùy chọn này chỉ thực sự hữu ích cho các tác giả công cụ xuôi dòng để dễ dàng chuyển đổi PostCSS 7 sang 8

import css from "file.css";

70

gói web. cấu hình. js

yarn add -D postcss-loader postcss

9

Chuỗi

gói web. cấu hình. js

pnpm add -D postcss-loader postcss

0

ví dụ

Bạn sẽ cần cài đặt

npm install --save-dev postcss-loader postcss

37

pnpm add -D postcss-loader postcss

1

Sử dụng cú pháp

npm install --save-dev postcss-loader postcss

38

gói web. cấu hình. js

pnpm add -D postcss-loader postcss

2

tự động sửa lỗi

Bạn sẽ cần cài đặt

npm install --save-dev postcss-loader postcss

39

pnpm add -D postcss-loader postcss

3

Thêm tiền tố nhà cung cấp vào quy tắc CSS bằng cách sử dụng

npm install --save-dev postcss-loader postcss

39

gói web. cấu hình. js

Cảnh báo

import css from "file.css";

9 bao gồm cả

npm install --save-dev postcss-loader postcss

39, vì vậy việc thêm riêng nó là không cần thiết nếu bạn đã sử dụng giá trị đặt trước. Hơn

PostCSS Preset Env

Bạn sẽ cần cài đặt

import css from "file.css";

9

pnpm add -D postcss-loader postcss

4

gói web. cấu hình. js

Mô-đun CSS

yarn add -D postcss-loader postcss

04 là gì?

Không có tùy chọn bổ sung nào được yêu cầu ở phía

import css from "file.css";

6. Để làm cho chúng hoạt động bình thường, hãy thêm tùy chọn

yarn add -D postcss-loader postcss

07 của

import css from "file.css";

80

gói web. cấu hình. js

pnpm add -D postcss-loader postcss

5

Bạn sẽ cần cài đặt

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

4

pnpm add -D postcss-loader postcss

6

Nếu bạn muốn xử lý các kiểu được viết bằng JavaScript, hãy sử dụng trình phân tích cú pháp

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

4

gói web. cấu hình. js

pnpm add -D postcss-loader postcss

7

Kết quả là bạn sẽ có thể viết các kiểu theo cách sau

pnpm add -D postcss-loader postcss

8

Cảnh báo

Nếu bạn đang sử dụng Babel, bạn cần thực hiện các thao tác sau để thiết lập hoạt động

Sử dụng

yarn add -D postcss-loader postcss

10

gói web. cấu hình. js

pnpm add -D postcss-loader postcss

9

Phát hành nội dung

Để ghi nội dung từ plugin PostCSS vào webpack, cần thêm thông báo vào

yarn add -D postcss-loader postcss

11

Thông báo phải chứa các trường sau

• yarn add -D postcss-loader postcss
  

  12 =

  yarn add -D postcss-loader postcss
  

  13 - Loại tin nhắn (yêu cầu, phải bằng

  yarn add -D postcss-loader postcss
  

  13)

• yarn add -D postcss-loader postcss
  

  15 - tên tệp (bắt buộc)

• yarn add -D postcss-loader postcss
  

  16 - nội dung tệp (bắt buộc)

• import css from "file.css";

  85 - bản đồ nguồn

• yarn add -D postcss-loader postcss
  

  18 - thông tin tài sản

gói web. cấu hình. js

import css from "file.css";

0

Thêm phụ thuộc, phụ thuộc ngữ cảnh, phụ thuộc xây dựng, thiếu phụ thuộc

Các phụ thuộc cần thiết để webpack hiểu khi nào cần chạy biên dịch lại trên các tệp đã thay đổi

PostCSS có còn được sử dụng không?

PostCSS có tốt hơn Sass không?

Tôi có thể sử dụng PostCSS với SCSS không?

Làm cách nào để cài đặt plugin PostCSS?