Javascript CSS类名中的破折号与Gatsby v3（CSS loader v5）

在Gatsby v2中，您可以通过向

Gatsby node.js添加以下代码来启用此语法
className={styles[“block\uu元素--修饰符”]}
：

const process\u rule=rule=>{
如果（第1条规则）{
返回{
…规则，
oneOf:rule.oneOf.map（进程规则），
};
}
if（Array.isArray（rule.use））{
返回{
…规则，
use:rule.use.map（use=>{
常量css_loader_regex=/\/css loader\/；
if（！css_loader_regex.test（use.loader））{
归还使用；
}
返回{
…使用，
选项：{
…使用.options，
camelCase：错，
},
};
}),
};
}
返回规则；
};
exports.onCreateWebpackConfig=（{getConfig，actions}）=>{
const config=getConfig（）；
const new_config={
…配置，
模块：{
…config.module，
规则：config.module.rules.map（进程规则），
},
};
actions.replaceWebpackConfig（新配置）；
};

但是，盖茨比v3正在使用css loader v5，它不再接受选项中的
camelCase:false
字段。相反，它具有字段
exportLocalsConvention
，该字段可以接受值
asIs
，但启用
namedExport
时，编译器会抛出错误：

modules.namedExport”选项要求“modules.exportLocalsConvention”选项为“camelCaseOnly”或“dasheOnly”

我试过：

选项：{
…使用.options，
模块：{
…使用.options.modules，
是的，
exportLocalsConvention:“asIs”，
ExportOnlyCals:错误，
namedExport:false，
},
},

但这不会使CSS类名在JSX中可访问，并给出警告：

warn You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

警告尝试导入错误：“块”不是从“/styles.module.css”（作为“styles”导入）导出的

看起来必须将
namedExport
设置为
true
才能访问JSX中编译的类名，但是css加载程序只接受
camelCaseOnly
或
dasheOnly
用于
exportLocalsConvention

我不知道如何在v3中启用与gatsbyv2相同的功能。我希望能够继续使用
className={styles[“block_uu元素-修饰符”]}
语法，因为它使识别CSS类变得容易，而且还保持CSS和JSX之间的一致性（我更希望不必重写一堆代码）

我正在导入一些样式，如《盖茨比v2到v3迁移指南》所述：

import*作为“/styles.module.css”中的样式

我也尝试过以旧的方式导入它们（
从“/styles.module.css”
）导入样式，但不幸的是没有什么不同。
所以问题出在
css loader
选项中的
esModule
字段上。是的，而且：

生成使用ES模块语法的JS模块。在某些情况下，使用ES模块是有益的，例如在模块串联和树抖动的情况下

据我所知，这将CSS类名转换为JS变量，而JS变量不能有连字符，因此它们改为camelcase

因此，要在CSS类名中保留连字符，并使用语法
className={styles[“block\uu element--modifier”]）
我们需要用以下内容覆盖
CSS加载程序
选项：

选项：{
…使用.options，
esModule:false，
模块：{
exportLocalsConvention:“asIs”，
namedExport:false，
},
},

但是，当我通过
gatsby node.js
将这些选项直接传递到webpack config时，我仍然遇到构建错误，但我发现了一个解决方法，即使用gatsby插件（仅129B缩小+gzip）在
gatsby config.js
中使用这些选项：

{
解决方案：“盖茨比”插件，
选项：{
CSSLOADER选项：{
esModule:false，
模块：{
exportLocalsConvention:“asIs”，
namedExport:false，
},
},
},
},

这将产生警告：

warn You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

然而，这只是一个警告，不会引起任何其他问题

使用此实现，您需要使用Gatsby v2方法导入样式：

从“/styles.module.css”导入样式；

请记住，这可以防止Gatbsy v3/
css加载程序
v5的默认树抖动行为

另外，事实证明，迁移指南中也包含了这一点。但是，它并不表示要使用
exportLocalsConvention:“asIs”
，这是我测试中所必需的。
你能分享一下你是如何导入/导出CSS模块的吗？当然可以。我是这样导入样式的：
import*作为来自“/styles.module.css”
符合Gatsby v2到v3迁移指南。我也尝试过用旧方法导入它们（
从“/styles.module.css”导入样式
）但是这对我的问题没有任何影响。我没有以任何方式导出CSS。它们只是简单的CSS文件。我应该做些不同的事情吗？嗨@pks，你在这个主题上有什么进展吗？你能用以前版本的CSS加载程序作为临时解决办法来操作gatsby v3吗？@soosap不，很遗憾，我没有取得任何进展ss，所以我选择暂时继续使用Gatsby v2。我最近很忙，所以我没有机会尝试使用以前版本的css加载程序。我想我在写这个问题之前尝试过，但遇到了问题。如果我让它工作起来，我肯定会在这里发布更新。@pks我想没有找到解决方案，或者？也很困难关于这个问题。