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.
Nội dung chính Show
Vượt qua yarn add -D postcss-loader postcss
44 trong plugin. 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 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 Loại module.exports = {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
};5 phải giống như postcss.d.ts Sử dụng cú pháp yarn add -D postcss-loader postcss
13. 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. Sử dụng cú pháp yarn add -D postcss-loader postcss
13. Bạn sẽ cần cài đặt yarn add -D postcss-loader postcss
14: 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. yarn add -D postcss-loader postcss
19 là gì? Xin vui lòng đọc. Bạn sẽ cần cài đặt module.exports = {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
};9:
yarn add -D postcss-loader postcss
yarn add -D postcss-loader postcss
yarn add -D postcss-loader postcss
yarn add -D postcss-loader postcss
yarn add -D postcss-loader postcss
yarn add -D postcss-loader postcss
yarn add -D postcss-loader postcss
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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; Bắt đầu module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; 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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [
"style-loader" ,
"css-loader" ,
{
loader: "postcss-loader" ,
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; 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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [
"style-loader" ,
"css-loader" ,
{
loader: "postcss-loader" ,
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; 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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; type execute = boolean ; Trong cấu hình sau, plugin
module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; Sử dụng thay thế với các tệp cấu hình:
(recommended )
yarn add -D postcss-loader postcss
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
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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; webpack.config.js
yarn add -D postcss-loader postcss
Tùy chọn
webpack.config.js
yarn add -D postcss-loader postcss
Mặc định:
module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; webpack.config.js
yarn add -D postcss-loader postcss
type execute = boolean ; webpack.config.js
yarn add -D postcss-loader postcss
module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [ "style-loader" , "css-loader" , "postcss-loader" ] ,
} ,
] ,
} ,
} ; Type:
yarn add -D postcss-loader postcss
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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [
"style-loader" ,
"css-loader" ,
{
loader: "postcss-loader" ,
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; 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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; Trong cấu hình sau, plugin module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; 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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; recommended ) Mặc định:
module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; Kích hoạt hỗ trợ phân tích cú pháp PostcSS trong module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; (recommend )
yarn add -D postcss-loader postcss
Cho phép đặt
module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [ "style-loader" , "css-loader" , "postcss-loader" ] ,
} ,
] ,
} ,
} ; Kích hoạt hỗ trợ phân tích cú pháp PostcSS trong module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; (recommend )
yarn add -D postcss-loader postcss
Cho phép đặt module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [ "style-loader" , "css-loader" , "postcss-loader" ] ,
} ,
] ,
} ,
} ;
(deprecated , will be removed in the next major release)
yarn add -D postcss-loader postcss
module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [
"style-loader" ,
"css-loader" ,
{
loader: "postcss-loader" ,
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [ "style-loader" , "css-loader" , "postcss-loader" ] ,
} ,
] ,
} ,
} ; 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" ] ,
} ,
] ,
} ,
} ; module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [ "style-loader" , "css-loader" , "postcss-loader" ] ,
} ,
] ,
} ,
} ; module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [ "style-loader" , "css-loader" , "postcss-loader" ] ,
} ,
] ,
} ,
} ; module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [ "style-loader" , "css-loader" , "postcss-loader" ] ,
} ,
] ,
} ,
} ; pnpm add -D postcss-loader postcss
Thiết lập
type execute = boolean ; 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 ;
} ) ; 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 ;
} ) ; 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 ;
} ) ; 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 ;
} ) ; 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 ;
} ) ; 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 ;
} ) ; WebPack.config.js (được đề xuất) (recommended )
pnpm add -D postcss-loader postcss
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ật/vô hiệu hóa Cấu hình tự động tải.
webpack.config.js
pnpm add -D postcss-loader postcss
Cho phép chỉ định đường dẫn đến tệp cấu hình.
webpack.config.js
pnpm add -D postcss-loader postcss
module.exports = {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
};4 Type:
pnpm add -D postcss-loader postcss
Mặc định: Phụ thuộc vào giá trị
yarn add -D postcss-loader postcss
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
yarn add -D postcss-loader postcss
yarn add -D postcss-loader postcss
webpack.config.js
pnpm add -D postcss-loader postcss
Thiết lập thay thế:
webpack.config.js
pnpm add -D postcss-loader postcss
module.exports = {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
};5 Type:
pnpm add -D postcss-loader postcss
Loại
module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; 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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; Tùy chọn
module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; yarn add -D postcss-loader postcss
module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [
"style-loader" ,
"css-loader" ,
{
loader: "postcss-loader" ,
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; 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 ; webpack.config.js
pnpm add -D postcss-loader postcss
webpack.config.js
pnpm add -D postcss-loader postcss
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
yarn add -D postcss-loader postcss
yarn add -D postcss-loader postcss
import css from "file.css" ; Thiết lập thay thế:
webpack.config.js
import css from "file.css" ; 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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; import css from "file.css" ; Tùy chọn
module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; yarn add -D postcss-loader postcss
module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [
"style-loader" ,
"css-loader" ,
{
loader: "postcss-loader" ,
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; webpack.config.js
import css from "file.css" ; 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ụ
Bạn sẽ cần cài đặt
yarn add -D postcss-loader postcss
import css from "file.css" ; webpack.config.js
import css from "file.css" ; 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
webpack.config.js
import css from "file.css" ; 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" ;
module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; yarn add -D postcss-loader postcss
webpack.config.js
import css from "file.css" ; Postcss đặt trước env
import css from "file.css" ; 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
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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; 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
Cảnh báo
module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; yarn add -D postcss-loader postcss
Postcss đặt trước env Bạn sẽ cần cài đặt module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; Mô -đun CSS yarn add -D postcss-loader postcss
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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; 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
} ,
] ,
] ,
} ; Bạn sẽ cần cài đặt
module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; 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
} ,
] ,
] ,
} ; Cảnh báo
module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; yarn add -D postcss-loader postcss
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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; Bạn sẽ cần cài đặt
module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; 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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; 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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; postcssCustomPlugin.js
module. exports = {
module: {
rules: [
{
test: /\.css$/i ,
use: [
"style-loader" ,
"css-loader" ,
{
loader: "postcss-loader" ,
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; 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
} ,
] ,
] ,
} ,
} ,
} ,
] ,
} ,
] ,
} ,
} ; CSS-in-JS và
module. exports = {
plugins: [
[
"postcss-preset-env" ,
{
// Options
} ,
] ,
] ,
} ; 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
} ,
] ,
] ,
} ;
