search

Hướng dẫn webpack config postcss-loader - webpack cấu hình postcss-loader

Ngày đăng: 27/10/2022
Trả lời: 0
Lượt xem: 22

Tuyên bố miễn trừ trách nhiệm: Postcss-Loader là gói của bên thứ ba được duy trì bởi các thành viên cộng đồng, nó có khả năng không có cùng hỗ trợ, chính sách bảo mật hoặc giấy phép như webpack và nó không được duy trì bởi webpack. postcss-loader is a third-party package maintained by community members, it potentially does not have the same support, security policy or license as webpack, and it is not maintained by webpack.

Show

Hướng dẫn webpack config postcss-loader - webpack cấu hình postcss-loader

yarn add -D postcss-loader postcss
29 = 
yarn add -D postcss-loader postcss
38 - Loại tin nhắn (yêu cầu, phải bằng 
yarn add -D postcss-loader postcss
38, 
yarn add -D postcss-loader postcss
40, 
yarn add -D postcss-loader postcss
41 hoặc 
yarn add -D postcss-loader postcss
42)

yarn add -D postcss-loader postcss
32 - Đường dẫn tệp tuyệt đối (yêu cầu)

Hoặc bạn có thể sử dụng plugin đã làm sẵn Postcss-add-add-end.

Vượt qua yarn add -D postcss-loader postcss 44 trong plugin.

Đóng góp

Xin vui lòng dành một chút thời gian để đọc các hướng dẫn đóng góp của chúng tôi nếu bạn chưa làm như vậy.

npm install --save-dev postcss-loader postcss

ĐÓNG GÓP

yarn add -D postcss-loader postcss

ĐÓNG GÓP

pnpm add -D postcss-loader postcss

Giấy phép

MIT

file.js

import css from "file.css";

webpack.config.js 

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

Trò chuyện trên trang web:

postcss.config.js

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};

Trò chuyện Postcss:automatically searches for configuration files.

webpack.config.js

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

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

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

Bắt đầu

  • module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
    2
  • module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
    3
  • module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
    4
  • module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
    5

module.exports = { plugins: [ [ "postcss-preset-env", { // Options }, ], ], };2

Type:

type execute = boolean;

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 sẽ cần cài đặt 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
7 và 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
8:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.style.js$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                parser: "postcss-js",
              },
              execute: true,
            },
          },
        ],
      },
    ],
  },
};

module.exports = { plugins: [ [ "postcss-preset-env", { // Options }, ], ], };3

Type:

type postcssOptions =
  | {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    }
  | ((loaderContext: LoaderContext) => {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    });

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 sẽ cần cài đặt 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
7 và 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
8:

hoặc

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
9 của bạn. Ví dụ:

type execute = boolean;
0

Trong cấu hình sau, plugin 

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
0 được sử dụng, không được cài đặt theo mặc định.

Sử dụng thay thế với các tệp cấu hình: (recommended)

yarn add -D postcss-loader postcss
0

Trình tải tự động tìm kiếm các tệp cấu hình. (deprecated, will be removed in the next major release)

yarn add -D postcss-loader postcss
1

Và chạy 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
9 thông qua phương pháp ưa thích của bạn.

webpack.config.js

yarn add -D postcss-loader postcss
2

Tùy chọn

webpack.config.js

yarn add -D postcss-loader postcss
3

Mặc định: 

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
7

webpack.config.js

yarn add -D postcss-loader postcss
4

type execute = boolean;
5

webpack.config.js

yarn add -D postcss-loader postcss
5

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

Type:

yarn add -D postcss-loader postcss
6

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 sẽ cần cài đặt 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
7 và 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
8:

hoặc

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
9 của bạn. Ví dụ:

  • Trong cấu hình sau, plugin 
    module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
    0 được sử dụng, không được cài đặt theo mặc định.
  • Sử dụng thay thế với các tệp cấu hình:
  • Trình tải tự động tìm kiếm các tệp cấu hình.
  • Và chạy 
    module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
    9 thông qua phương pháp ưa thích của bạn.recommended)
Tùy chọn

Mặc định: 

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
7

Kích hoạt hỗ trợ phân tích cú pháp PostcSS trong 

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
8. Nếu bạn sử dụng Kiểu JS, trình phân tích cú pháp 
module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
9, hãy thêm tùy chọn 
module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
2. (recommend)

yarn add -D postcss-loader postcss
7

Cho phép đặt 

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

Kích hoạt hỗ trợ phân tích cú pháp PostcSS trong 

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
8. Nếu bạn sử dụng Kiểu JS, trình phân tích cú pháp 
module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
9, hãy thêm tùy chọn 
module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
2. (recommend)

yarn add -D postcss-loader postcss
8

Cho phép đặt 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};
3 và plugin. (deprecated, will be removed in the next major release)

yarn add -D postcss-loader postcss
9
Tất cả các tùy chọn 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
6 được hỗ trợ. Có tùy chọn 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};
5 đặc biệt cho các tệp cấu hình. Cách nó hoạt động và cách nó có thể được cấu hình được mô tả dưới đây.

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

module.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"],
      },
    ],
  },
};
7 và 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};
8, bởi vì điều này có thể dẫn đến đường dẫn sai 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 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};
9.

pnpm add -D postcss-loader postcss
0

Thiết lập 

type execute = boolean;
1:

Sử dụng nó trước 

type postcssOptions =
  | {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    }
  | ((loaderContext: LoaderContext) => {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    });
5 và 
type postcssOptions =
  | {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    }
  | ((loaderContext: LoaderContext) => {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    });
7, nhưng sau các trình tải tiền xử lý khác như ví dụ 
type postcssOptions =
  | {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    }
  | ((loaderContext: LoaderContext) => {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    });
8, nếu bạn sử dụng bất kỳ (vì trình tải webpack đánh giá từ phải sang trái/dưới lên trên).before 
type postcssOptions =
  | {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    }
  | ((loaderContext: LoaderContext) => {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    });
5 and 
type postcssOptions =
  | {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    }
  | ((loaderContext: LoaderContext) => {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    });
7, but after other preprocessor loaders like e.g 
type postcssOptions =
  | {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    }
  | ((loaderContext: LoaderContext) => {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    });
8, if you use any (since webpack loaders evaluate right to left/bottom to top).

WebPack.config.js (được đề xuất) (recommended)

pnpm add -D postcss-loader postcss
1

type postcssOptions =
  | {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    }
  | ((loaderContext: LoaderContext) => {
      from: string;
      map: boolean | SourceMapOptions;
      parser: string | object | (() => Parser);
      stringifier: Stringifier | Syntax;
      syntax: Syntax;
      to: string;
    });
9

Bật/vô hiệu hóa Cấu hình tự động tải.

webpack.config.js

pnpm add -D postcss-loader postcss
2

Sợi dây

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

webpack.config.js

pnpm add -D postcss-loader postcss
3

module.exports = { plugins: [ [ "postcss-preset-env", { // Options }, ], ], };4

Type:

pnpm add -D postcss-loader postcss
4

Mặc định: Phụ thuộc vào giá trị 

yarn add -D postcss-loader postcss
01

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

yarn add -D postcss-loader postcss
02. Tất cả các giá trị cho phép tạo bản đồ nguồn ngoại trừ giá trị 
yarn add -D postcss-loader postcss
03 và 
yarn add -D postcss-loader postcss
04.

webpack.config.js

pnpm add -D postcss-loader postcss
5

Thiết lập thay thế:

webpack.config.js

pnpm add -D postcss-loader postcss
6

module.exports = { plugins: [ [ "postcss-preset-env", { // Options }, ], ], };5

Type:

pnpm add -D postcss-loader postcss
7

Loại 

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
5 phải giống như postcss.d.ts

Mặc định: 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
8

Tùy chọn 

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
5 đặc biệt xác định việc triển khai POSTCSS để sử dụng. Ghi đè phiên bản 
yarn add -D postcss-loader postcss
09 được cài đặt cục bộ của 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
8.

Tùy chọn này chỉ thực sự hữu ích cho các tác giả công cụ hạ nguồn để giảm bớt quá trình chuyển đổi 7 đến 8 của Postcss.

type execute = boolean;
5

webpack.config.js

pnpm add -D postcss-loader postcss
8

Sợi dây

webpack.config.js

pnpm add -D postcss-loader postcss
9

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

Mặc định: Phụ thuộc vào giá trị yarn add -D postcss-loader postcss 01

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

yarn add -D postcss-loader postcss
02. Tất cả các giá trị cho phép tạo bản đồ nguồn ngoại trừ giá trị 
yarn add -D postcss-loader postcss
03 và 
yarn add -D postcss-loader postcss
04.

import css from "file.css";
0

Thiết lập thay thế:

webpack.config.js 

import css from "file.css";
1

Loại module.exports = { plugins: [ [ "postcss-preset-env", { // Options }, ], ], };5 phải giống như postcss.d.ts

Mặc định: 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
8

import css from "file.css";
2

Tùy chọn 

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
5 đặc biệt xác định việc triển khai POSTCSS để sử dụng. Ghi đè phiên bản 
yarn add -D postcss-loader postcss
09 được cài đặt cục bộ của 
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
8.

webpack.config.js

import css from "file.css";
3

Tùy chọn này chỉ thực sự hữu ích cho các tác giả công cụ hạ nguồn để giảm bớt quá trình chuyển đổi 7 đến 8 của Postcss.

Ví dụ

Đường

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

yarn add -D postcss-loader postcss
12:

import css from "file.css";
4

webpack.config.js

import css from "file.css";
5

Sử dụng cú pháp yarn add -D postcss-loader postcss 13.

Autoprefixer

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

yarn add -D postcss-loader postcss
14:

webpack.config.js

import css from "file.css";
6

Thêm tiền tố nhà cung cấp vào các quy tắc CSS bằng cách sử dụng yarn add -D postcss-loader postcss 14.

Cảnh báo

import css from "file.css";
7

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
0 bao gồm 
yarn add -D postcss-loader postcss
14, do đó, việc thêm nó là không cần thiết nếu bạn đã sử dụng cài đặt trước. Thêm thông tin

webpack.config.js

import css from "file.css";
8

Postcss đặt trước env

import css from "file.css";
9

Tùy chọn này chỉ thực sự hữu ích cho các tác giả công cụ hạ nguồn để giảm bớt quá trình chuyển đổi 7 đến 8 của Postcss.

Ví dụ

  1. Đường
  2. Bạn sẽ cần cài đặt 
    yarn add -D postcss-loader postcss
    12:default export per style module.

Sử dụng cú pháp yarn add -D postcss-loader postcss 13.

Autoprefixer

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
0

Bạn sẽ cần cài đặt yarn add -D postcss-loader postcss 14:

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

yarn add -D postcss-loader postcss
14.

Cảnh báo

  • module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
    0 bao gồm 
    yarn add -D postcss-loader postcss
    14, do đó, việc thêm nó là không cần thiết nếu bạn đã sử dụng cài đặt trước. Thêm thông tin
  • Postcss đặt trước env
  • Bạn sẽ cần cài đặt 
    module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
    0:
  • Mô -đun CSS
  • yarn add -D postcss-loader postcss
    19 là gì? Xin vui lòng đọc.

webpack.config.js

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

Không có tùy chọn bổ sung cần thiết ở phía module.exports = { module: { rules: [ { test: /\.css$/i, use: [ "style-loader", "css-loader", { loader: "postcss-loader", options: { postcssOptions: { plugins: [ [ "postcss-preset-env", { // Options }, ], ], }, }, }, ], }, ], }, };7. Để làm cho chúng hoạt động đúng, hãy thêm tùy chọn ____ 95 ____ ____122.

CSS-in-JS và 

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
9

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

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
9:

  1. 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 = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
    9.

Cảnh báo

  • module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
    0 bao gồm 
    yarn add -D postcss-loader postcss
    14, do đó, việc thêm nó là không cần thiết nếu bạn đã sử dụng cài đặt trước. Thêm thông tin
  • Postcss đặt trước env

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
2

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

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
0:

  1. Mô -đun CSS

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
3

postcss.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
4

postcssCustomPlugin.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
5

yarn add -D postcss-loader postcss 19 là gì? Xin vui lòng đọc.

Không có tùy chọn bổ sung cần thiết ở phía 

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};
7. Để làm cho chúng hoạt động đúng, hãy thêm tùy chọn ____ 95 ____ ____122.

CSS-in-JS và 

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
9

Bạn sẽ cần cài đặt module.exports = { plugins: [ [ "postcss-preset-env", { // Options }, ], ], };9:

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 = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};
9.

programming css PostCSS postcss-preset-env MiniCssExtractPlugin Webpack Webpack loader Postcss-import Webpack --config js CSS loader

Bài Viết Liên Quan

Một số bài tập hóa 11 chương điện li năm 2024
Một số bài tập hóa 11 chương điện li năm 2024

mẹo hay Khỏe Đẹp Bài tập
Vai u thịt bắp là như thế nào năm 2024
Vai u thịt bắp là như thế nào năm 2024

mẹo hay Hỏi Đáp Thế nào Món Ngon Thịt Hơn
Làm thế nào để da không bị khô nẻ năm 2024
Làm thế nào để da không bị khô nẻ năm 2024

mẹo hay Hỏi Đáp Thế nào Hơn
Tập cận bình chủ tịch quân uỷ trung ương năm 2024
Tập cận bình chủ tịch quân uỷ trung ương năm 2024

mẹo hay tập cận bình Hơn
Bài 49 50 51 trang 101 sgk toán 7 năm 2024
Bài 49 50 51 trang 101 sgk toán 7 năm 2024

mẹo hay
Sakura thủ lĩnh thẻ bài tập 44 phần 1 năm 2024
Sakura thủ lĩnh thẻ bài tập 44 phần 1 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Các bài toán giải bằng phương pháp khử lớp 4 năm 2024
Các bài toán giải bằng phương pháp khử lớp 4 năm 2024

mẹo hay Học Tốt Phương pháp
Bài tập thể dục chữa gai đốt sống cổ năm 2024
Bài tập thể dục chữa gai đốt sống cổ năm 2024

mẹo hay Khỏe Đẹp Thể dục Bài tập
Bán nhà hẻm 184 nguyễn văn quỳ quận 7 năm 2024
Bán nhà hẻm 184 nguyễn văn quỳ quận 7 năm 2024

mẹo hay Xây Đựng Nhà
Bài văn trao duyên lớp 10 12 câu đầu năm 2024
Bài văn trao duyên lớp 10 12 câu đầu năm 2024

mẹo hay
Dđề thi vào lớp 10 toán hải dương 2023-2010 năm 2024
Dđề thi vào lớp 10 toán hải dương 2023-2010 năm 2024

mẹo hay
Biểu cảm về tác phẩm văn học bánh trôi nước năm 2024
Biểu cảm về tác phẩm văn học bánh trôi nước năm 2024

mẹo hay Món Ngon Bánh Học Tốt Học
Bài viết số 2 lớp 7 văn biểu cảm năm 2024
Bài viết số 2 lớp 7 văn biểu cảm năm 2024

mẹo hay
Hạch toán chi phí vé máy bay đi công tác năm 2024
Hạch toán chi phí vé máy bay đi công tác năm 2024

mẹo hay Công Nghệ Máy
Văn phòng đại diện vietjet air tại hà nội năm 2024
Văn phòng đại diện vietjet air tại hà nội năm 2024

mẹo hay
Các nước có nên văn hóa mạnh nhất năm 2024
Các nước có nên văn hóa mạnh nhất năm 2024

mẹo hay Hỏi Đáp Có nên
Bằng trung bình kha có khó xin việc không năm 2024
Bằng trung bình kha có khó xin việc không năm 2024

mẹo hay
Bài tập về quy tắc cộng và nhân violet năm 2024
Bài tập về quy tắc cộng và nhân violet năm 2024

mẹo hay Khỏe Đẹp Bài tập
Soạn bài ngữ văn 9 kiều ở lầu ngưng bích năm 2024
Soạn bài ngữ văn 9 kiều ở lầu ngưng bích năm 2024

mẹo hay
Đề thi thử toán thptqg 2023 sở gd&đt đà nẵng năm 2024
Đề thi thử toán thptqg 2023 sở gd&đt đà nẵng năm 2024

mẹo hay

Quảng Cáo

Có thể bạn quan tâm

Hình anh hot girl quỳnh anh thanh hóa năm 2024
3 tháng trước . bởi Bright-eyedAdherence
Bài tập thể dục cho người đau cột sống năm 2024
3 tháng trước . bởi CurtainedMusician
Nhuững lỗi khó chịu khi dùng iphone lock nhật năm 2024
3 tháng trước . bởi RipeDevolution
Giải toán lớp 9 bài 1 căn bậc hai năm 2024
3 tháng trước . bởi ProductiveRelaxation
Nội dung yêu nước trong văn học trung đại năm 2024
3 tháng trước . bởi NovelJurisprudence
Cách dùng điện thoại thanh toán samsung pay năm 2024
3 tháng trước . bởi UrgentBrowsing
Trẻ sơ sinh nên tắm vào thời gian nào năm 2024
3 tháng trước . bởi EsteemedHeader
Làm thế nào để hack được mật khẩu wifi năm 2024
3 tháng trước . bởi SumptuousLigament
Dđăng nhập sql express báo lỗi login failed năm 2024
3 tháng trước . bởi FederalRunoff
Fix lỗi iphone lock ios 9.3.4 năm 2024
3 tháng trước . bởi ForestedSubscription

Toplist được quan tâm

#1
Top 8 viết phương trình đường thẳng đi qua 2 điểm a;0 và b(3;0) 2023
1 năm trước
#2
Top 7 sự va chạm giữa các nền văn minh pdf 2023
1 năm trước
#3
Top 8 xe buýt đà nẵng - tam kỳ hôm nay 2023
1 năm trước
#4
Top 8 ngân hàng câu hỏi trắc nghiệm địa lý 12 2023
1 năm trước
#5
Top 6 túi đeo bao tử nữ hàng hiệu 2023
1 năm trước
#6
Top 10 sữa rửa mặt cho người lớn tuổi 2023
1 năm trước
#7
Top 7 tác giả bài hát con cào cào 2023
1 năm trước
#8
Top 5 lời thay đổi lil wuyn 2023
1 năm trước
#9
Top 5 bài hát trong phim hương vị tình thân 2023
1 năm trước

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Toàn Thua Inc.