在JSX和CSS输出(或其他程序化手段)输出中的JSX中的CSS classNames缩小/mangle CSS cla

Question

我想在我的输出CSS文件中和从我的React组件中缩小我的classNames(非常最小的源保护目的(，与此WebPack插件相似：https：https：https：https：https：https：https：//github.com/vreshch/optimize-css-classnames-plugin

我可以使用任何现有的选项来实现这一目标，无论是webpack还是其他选择？非常感谢。

来自：

<div className="long-class-name"></div>
.long-class-name {
 }

to：

<div class="a"></div>
.a {
}

Answer 1

当您已经使用了WebPack时，我认为一个不错的选择是使用CSS模块来实现这一目标。您可以使用CSS-Loader或PostCSS-Modules来做到这一点。

基本上，通过使用CSS模块，您可以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上的选项的更多信息。

这样做，您可以按照所需的方式指定班级名称并解决问题。

希望有帮助！

Answer 2

对于任何想要在Next.js中轻松man的人，使用我的软件包！