如何将 css-module 类名映射提取到 json 资产？

问题描述

我正在使用 webpack 为我的应用程序捆绑前端代码。后端是用python编写的。我有一些样式写为 css-modules，这意味着我有本地 CSS 类名称，可以通过 webpack 转换为全局类名称。我可以正常方式从javascript端访问这个映射，

import styles from "./foobar.module.css";

但我也需要从 python 服务器端访问它。作为构建过程的一部分，将这些映射提取为 JSON 文件的正确方法是什么？

我已经设法拼凑出一些似乎有效的东西，但我不禁想到有一种更官方的方法可以做到这一点，但我一直找不到。

/**
 * extract CSS class names map to a json file
 */
class MyPlugin { 
    constructor() { 
        this.pluginName = "MyPlugin"
    }
    /**
     * @param {Compiler} compiler 
     */
    apply(compiler) { 
        compiler.hooks.thisCompilation.tap(this.pluginName,(compilation,params) => { 
            compilation.hooks.processAssets.tap(
                {
                  name: this.pluginName,stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,},(assets) => {
                    let exports;
                    for (const mod of compilation.modules) { 
                        if (mod.rawRequest ===  './foobar.module.css') { 
                            exports = mod._source.source().match(/export default ({.*});/)[1]
                        }
                    }
                    assets["css.json"] = {
                        source: () => exports,size: () => exports.length,}
                });
        })
    }
}

有更好的方法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

css-modules webpack webpack webpack