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";
5Bắ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";
7npm 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
9 được sử dụng, không được cài đặt theo mặc địnhimport css from "file.css";
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ạnTùy chọn
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
},
],
},
};
1
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
},
],
},
};
Loại
import css from "file.css";
2Mặc định.
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
},
],
},
};
2Kí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"],
},
],
},
};
1gói web. cấu hình. js
import css from "file.css";
7module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
},
],
},
};
6
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
},
],
},
};
Loại
import css from "file.css";
9Mặc định.
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
},
],
},
};
2Cho 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ướiChú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ọnimport css from "file.css";
25
import css from "file.css";
Thiết lập
import css from "file.css";
26gó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";
8Thiết lập
import css from "file.css";
27gói web. cấu hình. js
Thiết lập
import css from "file.css";
28gói web. cấu hình. js
Thiết lập
import css from "file.css";
29gói web. cấu hình. js
import css from "file.css";
70
import css from "file.css";
gói web. cấu hình. js
npm install --save-dev postcss-loader postcss
3import css from "file.css";
20
import css from "file.css";
Loại
yarn add -D postcss-loader postcss
0Mặc định.
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
},
],
},
};
2Cho 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ìnhTrì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
7 trongimport css from "file.css";
74import css from "file.css";
- một tệp
75 ở định dạng JSON hoặc YAMLimport css from "file.css";
- tệp
76,import css from "file.css";
77,import css from "file.css";
78,import css from "file.css";
79 hoặcimport css from "file.css";
90import css from "file.css";
- một mô-đun CommonJS
91 hoặcimport css from "file.css";
92 xuất một đối tượng [được khuyến nghị]import css from "file.css";
Sử dụng ký hiệu
import css from "file.css";
25postcss. cấu hình. js [khuyên dùng]
Sử dụng ký hiệu
import css from "file.css";
70postcss. 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]
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ìnhyarn add -D postcss-loader postcss
1Sau 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
2import css from "file.css";
84
import css from "file.css";
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
3Chuỗ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
4import css from "file.css";
85
import css from "file.css";
Loại
yarn add -D postcss-loader postcss
5Mặc định. phụ thuộc vào giá trị
import css from "file.css";
86Theo 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";
89gói web. cấu hình. js
yarn add -D postcss-loader postcss
6thiết lập thay thế
gói web. cấu hình. js
yarn add -D postcss-loader postcss
7npm install --save-dev postcss-loader postcss
30
npm install --save-dev postcss-loader postcss
Loại
yarn add -D postcss-loader postcss
8loại
npm install --save-dev postcss-loader postcss
30 phải giống với postcss. d. tsMặc định.
import css from "file.css";
7Tù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";
7Tù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
import css from "file.css";
gói web. cấu hình. js
yarn add -D postcss-loader postcss
9Chuỗi
gói web. cấu hình. js
pnpm add -D postcss-loader postcss
0ví dụ
Bạn sẽ cần cài đặt
npm install --save-dev postcss-loader postcss
37pnpm add -D postcss-loader postcss
1Sử dụng cú pháp
npm install --save-dev postcss-loader postcss
38gói web. cấu hình. js
pnpm add -D postcss-loader postcss
2tự động sửa lỗi
Bạn sẽ cần cài đặt
npm install --save-dev postcss-loader postcss
39pnpm add -D postcss-loader postcss
3Thê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
39gói web. cấu hình. js
Cảnh báo
9 bao gồm cảimport css from "file.css";
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ơnnpm install --save-dev postcss-loader postcss
PostCSS Preset Env
Bạn sẽ cần cài đặt
import css from "file.css";
9pnpm add -D postcss-loader postcss
4gó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";
80gói web. cấu hình. js
pnpm add -D postcss-loader postcss
5Bạn sẽ cần cài đặt
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
},
],
},
};
4pnpm add -D postcss-loader postcss
6Nế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"],
},
],
},
};
4gói web. cấu hình. js
pnpm add -D postcss-loader postcss
7Kết quả là bạn sẽ có thể viết các kiểu theo cách sau
pnpm add -D postcss-loader postcss
8Cả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
10gói web. cấu hình. js
pnpm add -D postcss-loader postcss
9Phá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
11Thông báo phải chứa các trường sau
12 =yarn add -D postcss-loader postcss
13 - Loại tin nhắn [yêu cầu, phải bằngyarn 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]yarn add -D postcss-loader postcss
85 - bản đồ nguồnimport css from "file.css";
18 - thông tin tài sảnyarn add -D postcss-loader postcss
gói web. cấu hình. js
import css from "file.css";
0Thê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