邮政模块

A 类 邮政 要使用的插件 CSS 模块 到处都是 不仅在客户一方.

这是什么?

例如,您拥有以下CSS:

/* styles.css */
:global .page {
    padding: 20px;
}

.title {
    composes: title from "./mixins.css";
    color: green;
}

.article {
    font-size: 16px;
}

/* mixins.css */
.title {
    color: black;
    font-size: 40px;
}

.title:hover {
    color: red;
}

转变之后,它会变成这样:

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

插件会给您一个 JSON 对象,用于转换类 :

{
    "title": "_title_xkpkl_5 _title_116zl_1",
    "article": "_article_xkpkl_10"
}

使用量

保存导出类

默认情况下,一个带有导出类的JSON文件将放在相应的CSS旁边. 但你有自由 做你想要的一切 出口类,只是 使用该 getJSON 调用。 例如, 将有关类的数据保存到相应的 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));
        },
    }),
]);

getJSON 也可返回 a Promise。 。 。 .

生成范围化名称

默认情况下,插件假设所有类都是本地的. 你可以改变 使用 scopeBehaviour 选项 :

postcss([
    require("postcss-modules")({
        scopeBehaviour: "global", // can be 'global' or 'local',
    }),
]);

要定义全局模块的路径,请使用 globalModulePaths 选项. 这是一个由正则表达式定义路径的阵列:

postcss([
  require('postcss-modules')({
    globalModulePaths: [/path\/to\/legacy-styles/, /another\/paths/],
  });
]);

要生成自定义类,请使用 generateScopedName 回调 :

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

或者把插入的字符串传递给 generateScopedName 选项 (更多细节) 这里:

postcss([
    require("postcss-modules")({
        generateScopedName: "[name]__[local]___[hash:base64:5]",
    }),
]);

有可能添加自定义散列以使用 hashPrefix 选项(如 装弹机:

postcss([
    require("postcss-modules")({
        generateScopedName: "[name]__[local]___[hash:base64:5]",
        hashPrefix: "prefix",
    }),
]);

导出全局

如果您需要通过 JSON 对象与本地对象一起导出全局名称,请添加 exportGlobals 选项 :

postcss([
    require("postcss-modules")({
        exportGlobals: true,
    }),
]);

正在装入源文件

需要时可以通过自定义加载器(参见 文件系统Lader 例如:

postcss([
    require("postcss-modules")({
        Loader: CustomLoader,
    }),
]);

您也可以通过任何需要的根路径 :

postcss([
  require('postcss-modules')({
    root: 'C:\\',
  });
]);

本地公约

类型 : String | (originalClassName: string, generatedClassName: string, inputFile: string) => className: (string|string[]) 默认 : null

导出类名样式, 您 json 中的密钥 .

代替字符串,自定义函数可以生成导出类名.

解析路径别名

您可以重写路径 composes/from 使用 resolve 选项. 当您需要解决自定义路径的别名时,它会有所帮助.

参数:

• file 我们想要解决的模块
• importer ——导入我们希望解决的模块的文件

返回值: string | null | Promise<string | null>

postcss([
    require("postcss-modules")({
        resolve: function (file, importer) {
            return path.resolve(
                path.dirname(importer),
                file.replace(/^@/, process.cwd()
            );
        },
    }),
]);

与模板的整合

该插件只将 CSS 类转换为 CSS 模块. 但您可能想要将这些 CSS 模块与您的模板相融合 . 以下是一些例子.

假设您保存了项目的 CSS 模块 cssModules.json数字 :

{
    "title": "_title_xkpkl_5 _title_116zl_1",
    "article": "_article_xkpkl_10"
}

帕格(前贾德)

假设你有一个Pug模板 about.jade数字 :

h1(class=css.title) postcss-modules
article(class=css.article) A PostCSS plugin to use CSS Modules everywhere

发音:

var jade = require("jade");
var cssModules = require("./cssModules.json");
var html = jade.compileFile("about.jade")({ css: cssModules });
console.log(html);

你会得到以下 HTML:

<h1 class="_title_xkpkl_5 _title_116zl_1">postcss-modules</h1>
<article class="_article_xkpkl_10">
    A PostCSS plugin to use CSS Modules everywhere
</article>

HTML 语言

对于 HTML 转换,我们将使用 HTML 后页 财务报告和审定财务报表 PostHTML CSS 模块数字 :

npm install --save posthtml posthtml-css-modules

这是我们的模板 about.html数字 :

<h1 css-module="title">postcss-modules</h1>
<article css-module="article">
    A PostCSS plugin to use CSS Modules everywhere
</article>

改变它:

var fs = require("fs");
var posthtml = require("posthtml");
var posthtmlCssModules = require("posthtml-css-modules");
var template = fs.readFileSync("./about.html", "utf8");

posthtml([posthtmlCssModules("./cssModules.json")])
    .process(template)
    .then(function (result) {
        console.log(result.html);
    });

请检查date=中的日期值 (帮助) 后HTML的文档(中文(简体) )

你会得到以下 HTML:

<h1 class="_title_xkpkl_5 _title_116zl_1">postcss-modules</h1>
<article class="_article_xkpkl_10">
    A PostCSS plugin to use CSS Modules everywhere
</article>

我能看看插件吗?

当然! 看看这个 实例。 。 。 .

见 邮政 为您环境提供示例的文档, 不要忘记运行

npm install --save-dev postcss postcss-modules

发起人

• 德米特里·奥尔耶尼奥夫