在 JSX 和 Webpack 输出的 CSS 中缩小/修改 CSS 类名（或其他编程方式）

Posted 2023-02-22

【中文标题】在 JSX 和 Webpack 输出的 CSS 中缩小/修改 CSS 类名（或其他编程方式）

【英文标题】：Minify/Mangle CSS Classnames in JSX and CSS output from Webpack (or other programmatic means)

【发布时间】：2018-07-25 10:36:31

【问题描述】：

我想在我的输出 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 

【问题讨论】：

medium.freecodecamp.org/…

Plagin mini-css-class-name: github.com/shoonia/mini-css-class-name

我们如何使用 create-react-app 实现这个功能

【参考方案1】：

由于您已经在使用 Webpack，我认为一个不错的选择是使用 CSS Modules 来实现这一点。例如，您可以使用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';
        
      
    
  ]

请参阅docs 以了解有关CSS Modules 上的选项的更多信息。

这样做，您可以根据需要指定类名并解决您的问题。

希望有帮助！

【讨论】：

嘿@Slbox，对你有帮助吗？

我最终没有追求这个，但这个答案理论上应该可行。

【参考方案2】：

对于任何想要在 Next.js 中轻松修改类名的人，请使用 my package！