我想在我的输出 CSS 文件和来自我的 React 组件的渲染 JSX 中缩小我的类名（用于非常小的源保护目的）类似于这个 Webpack 插件：https : //github.com/vreshch/optimize-css -classnames-plugin
我可以使用任何现有的选项来实现这一点，无论是 Webpack 还是其他方式？非常感谢。
从：
<div className="long-class-name"></div>
.long-class-name {
}
到：
<div class="a"></div>
.a {
}
由于您已经在使用 Webpack，我认为一个不错的选择是使用CSS Modules来实现这一点。例如，您可以使用css-loader或postcss-modules来做到这一点。
基本上，通过使用 CSS module，您可以import将 CSS 视为 JSON。所以，如果你写.long-class-name { }你会得到这样的东西{ 'long-class-name': '<<interpolated name>>' }。这里的技巧是，<<interpolated name>>在我的示例中，您可以通过编程方式设置。
Webpack 有一些你可以使用的预定义令牌，你可以在这里看到：https : //github.com/webpack/loader-utils#interpolatename。您可以在此处查看示例：
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
}
}
]
}
但是，如果您想要更“定制”的东西，您可以指定一个getLocalIdent函数：
{
test: /\.css$/,
use: [
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[path][name]__[local]--[hash:base64:5]',
getLocalIdent: (context, localIdentName, localName, options) => {
return 'whatever_random_class_name';
}
}
}
]
}
请参阅文档以阅读有关CSS Modules.
这样做，您可以按照您需要的方式指定您的类名并解决您的问题。
希望有帮助！
对于任何想要在 Next.js 中轻松修改类名的人，请使用我的包！