Postcss generatescopedname

chức năng không đồng bộ transpileCSSModule ({ css, originalSource, tên đường dẫn }) { if (css === null) { return { TransformSource. `mô-đun. xuất khẩu = {}`, nguồn gốc, bản đồ. null, tên đường dẫn, phụ thuộc. [], mã đẹp. '', css. '', } } hãy để jsonString = '{}' hãy để plugins = [ postcssModules({ getJSON. hàm (cssFileName. bất kỳ, json. bất kỳ, tên tệp đầu ra. bất kỳ) { jsonString = JSON. stringify(json) }, }), ] thử { let result = await postcss(plugins). quá trình (css) trả về { đã chuyển đổi Nguồn. `mô-đun. xuất khẩu = ` + jsonString, nguồn gốc, bản đồ. kết quả. bản đồ, tên đường dẫn, phụ thuộc. [], mã đẹp. '',

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

Nội dung chính Show

Tạo tên phạm vi
Xuất toàn cầu
Đang tải tệp nguồn
người dân địa phươngQuy ước
Giải quyết bí danh đường dẫn
Tích hợp với các mẫu

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"
}

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"
}

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"
}

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));
		},
	}),
]);

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;
}

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;
}

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));
		},
	}),
]);

Kiểu tên lớp đã xuất, các khóa trong json của bạn

TênLoạiMô tả

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));
		},
	}),
]);

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));
		},
	}),
]);

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));
		},
	}),
]);

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ết

postcss([
	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',
	}),
]);

._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;
}

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ụ

programming css

Postcss generatescopedname

Tạo tên phạm vi

Xuất toàn cầu

Đang tải tệp nguồn

người dân địa phươngQuy ước

Giải quyết bí danh đường dẫn

Tích hợp với các mẫu

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

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