Theo mặc định, một tệp JSON với các lớp đã xuất sẽ được đặt bên cạnh CSS tương ứng. Nhưng bạn có quyền tự do làm mọi thứ bạn muốn với các lớp đã xuất, chỉ cần sử dụng lệnh gọi lại
{ "title": "_title_xkpkl_5 _title_116zl_1", "article": "_article_xkpkl_10" }2. Ví dụ: lưu dữ liệu về các lớp vào một tệp JSON tương ứng
postcss[[ require["postcss-modules"][{ getJSON: function [cssFileName, json, outputFileName] { var path = require["path"]; var cssName = path.basename[cssFileName, ".css"]; var jsonFileName = path.resolve["./build/" + cssName + ".json"]; fs.writeFileSync[jsonFileName, JSON.stringify[json]]; }, }], ]];
{ "title": "_title_xkpkl_5 _title_116zl_1", "article": "_article_xkpkl_10" }2 cũng có thể trả về một
{ "title": "_title_xkpkl_5 _title_116zl_1", "article": "_article_xkpkl_10" }4
Tạo tên phạm vi
Theo mặc định, plugin giả định rằng tất cả các lớp là cục bộ. Bạn có thể thay đổi hành vi này bằng cách sử dụng tùy chọn
{ "title": "_title_xkpkl_5 _title_116zl_1", "article": "_article_xkpkl_10" }5
postcss[[ require["postcss-modules"][{ scopeBehaviour: "global", // can be 'global' or 'local', }], ]];
Để xác định đường dẫn cho các mô-đun toàn cầu, hãy sử dụng tùy chọn
{ "title": "_title_xkpkl_5 _title_116zl_1", "article": "_article_xkpkl_10" }6. Nó là một mảng với các biểu thức chính quy xác định các đường dẫn
postcss[[ require['postcss-modules'][{ globalModulePaths: [/path\/to\/legacy-styles/, /another\/paths/], }]; ]];
Để tạo các lớp tùy chỉnh, hãy sử dụng lệnh gọi lại
{ "title": "_title_xkpkl_5 _title_116zl_1", "article": "_article_xkpkl_10" }7
postcss[[ require["postcss-modules"][{ generateScopedName: function [name, filename, css] { var path = require["path"]; var i = css.indexOf["." + name]; var line = css.substr[0, i].split[/[\r\n]/].length; var file = path.basename[filename, ".css"]; return "_" + file + "_" + line + "_" + name; }, }], ]];
Hoặc chỉ cần chuyển một chuỗi nội suy đến tùy chọn
{ "title": "_title_xkpkl_5 _title_116zl_1", "article": "_article_xkpkl_10" }7 [Chi tiết khác]
postcss[[ require["postcss-modules"][{ generateScopedName: "[name]__[local]___[hash:base64:5]", }], ]];
Có thể thêm hàm băm tùy chỉnh để tạo các lớp độc đáo hơn bằng cách sử dụng tùy chọn
{ "title": "_title_xkpkl_5 _title_116zl_1", "article": "_article_xkpkl_10" }9 [như trong ]
postcss[[ require["postcss-modules"][{ generateScopedName: "[name]__[local]___[hash:base64:5]", hashPrefix: "prefix", }], ]];
Xuất toàn cầu
Nếu bạn cần xuất tên chung qua đối tượng JSON cùng với tên cục bộ, hãy thêm tùy chọn
postcss[[ require["postcss-modules"][{ getJSON: function [cssFileName, json, outputFileName] { var path = require["path"]; var cssName = path.basename[cssFileName, ".css"]; var jsonFileName = path.resolve["./build/" + cssName + ".json"]; fs.writeFileSync[jsonFileName, JSON.stringify[json]]; }, }], ]];0
postcss[[ require["postcss-modules"][{ exportGlobals: true, }], ]];
Đang tải tệp nguồn
Nếu cần, bạn có thể vượt qua trình tải tùy chỉnh [ví dụ: xem FileSystemLoader]
._title_116zl_1 { color: black; font-size: 40px; } ._title_116zl_1:hover { color: red; } .page { padding: 20px; } ._title_xkpkl_5 { color: green; } ._article_xkpkl_10 { font-size: 16px; }0
Bạn cũng có thể chuyển bất kỳ đường dẫn gốc cần thiết nào
._title_116zl_1 { color: black; font-size: 40px; } ._title_116zl_1:hover { color: red; } .page { padding: 20px; } ._title_xkpkl_5 { color: green; } ._article_xkpkl_10 { font-size: 16px; }1
người dân địa phươngQuy ước
Loại.
postcss[[ require["postcss-modules"][{ getJSON: function [cssFileName, json, outputFileName] { var path = require["path"]; var cssName = path.basename[cssFileName, ".css"]; var jsonFileName = path.resolve["./build/" + cssName + ".json"]; fs.writeFileSync[jsonFileName, JSON.stringify[json]]; }, }], ]];1 Mặc định.
postcss[[ require["postcss-modules"][{ getJSON: function [cssFileName, json, outputFileName] { var path = require["path"]; var cssName = path.basename[cssFileName, ".css"]; var jsonFileName = path.resolve["./build/" + cssName + ".json"]; fs.writeFileSync[jsonFileName, JSON.stringify[json]]; }, }], ]];2
Kiểu tên lớp đã xuất, các khóa trong json của bạn
postcss[[ require["postcss-modules"][{ getJSON: function [cssFileName, json, outputFileName] { var path = require["path"]; var cssName = path.basename[cssFileName, ".css"]; var jsonFileName = path.resolve["./build/" + cssName + ".json"]; fs.writeFileSync[jsonFileName, JSON.stringify[json]]; }, }], ]];3_______1_______4Tên lớp sẽ được lạc đà, tên lớp ban đầu sẽ không bị xóa khỏi người dân địa phương
postcss[[ require["postcss-modules"][{ getJSON: function [cssFileName, json, outputFileName] { var path = require["path"]; var cssName = path.basename[cssFileName, ".css"]; var jsonFileName = path.resolve["./build/" + cssName + ".json"]; fs.writeFileSync[jsonFileName, JSON.stringify[json]]; }, }], ]];5
postcss[[ require["postcss-modules"][{ getJSON: function [cssFileName, json, outputFileName] { var path = require["path"]; var cssName = path.basename[cssFileName, ".css"]; var jsonFileName = path.resolve["./build/" + cssName + ".json"]; fs.writeFileSync[jsonFileName, JSON.stringify[json]]; }, }], ]];4Tên lớp sẽ được lạc đà, tên lớp ban đầu sẽ bị xóa khỏi người dân địa phương
postcss[[ require["postcss-modules"][{ getJSON: function [cssFileName, json, outputFileName] { var path = require["path"]; var cssName = path.basename[cssFileName, ".css"]; var jsonFileName = path.resolve["./build/" + cssName + ".json"]; fs.writeFileSync[jsonFileName, JSON.stringify[json]]; }, }], ]];7
postcss[[ require["postcss-modules"][{ getJSON: function [cssFileName, json, outputFileName] { var path = require["path"]; var cssName = path.basename[cssFileName, ".css"]; var jsonFileName = path.resolve["./build/" + cssName + ".json"]; fs.writeFileSync[jsonFileName, JSON.stringify[json]]; }, }], ]];4Chỉ dấu gạch ngang trong tên lớp sẽ được lạc đà
postcss[[ require["postcss-modules"][{ getJSON: function [cssFileName, json, outputFileName] { var path = require["path"]; var cssName = path.basename[cssFileName, ".css"]; var jsonFileName = path.resolve["./build/" + cssName + ".json"]; fs.writeFileSync[jsonFileName, JSON.stringify[json]]; }, }], ]];9
postcss[[ require["postcss-modules"][{ getJSON: function [cssFileName, json, outputFileName] { var path = require["path"]; var cssName = path.basename[cssFileName, ".css"]; var jsonFileName = path.resolve["./build/" + cssName + ".json"]; fs.writeFileSync[jsonFileName, JSON.stringify[json]]; }, }], ]];4Dấu gạch ngang trong tên lớp sẽ được lạc đà, lớp ban đầu
Thay cho một chuỗi, một hàm tùy chỉnh có thể tạo tên lớp đã xuất
Giải quyết bí danh đường dẫn
Bạn có thể viết lại đường dẫn cho
postcss[[ require["postcss-modules"][{ scopeBehaviour: "global", // can be 'global' or 'local', }], ]];1 bằng cách sử dụng tùy chọn
postcss[[ require["postcss-modules"][{ scopeBehaviour: "global", // can be 'global' or 'local', }], ]];2. Nó hữu ích khi bạn cần giải quyết bí danh đường dẫn tùy chỉnh
Thông số
postcss[[ require["postcss-modules"][{ scopeBehaviour: "global", // can be 'global' or 'local', }], ]];
3 — một mô-đun mà chúng tôi muốn giải quyếtpostcss[[ require["postcss-modules"][{ scopeBehaviour: "global", // can be 'global' or 'local', }], ]];
4 — tệp nhập mô-đun mà chúng tôi muốn giải quyết
Giá trị trả về.
postcss[[ require["postcss-modules"][{ scopeBehaviour: "global", // can be 'global' or 'local', }], ]];5
._title_116zl_1 { color: black; font-size: 40px; } ._title_116zl_1:hover { color: red; } .page { padding: 20px; } ._title_xkpkl_5 { color: green; } ._article_xkpkl_10 { font-size: 16px; }2
Tích hợp với các mẫu
Plugin chỉ chuyển đổi các lớp CSS thành các mô-đun CSS. Nhưng bạn có thể muốn tích hợp các mô-đun CSS này với các mẫu của mình. Dưới đây là một số ví dụ