Minify/Mangle CSS JSX 中的类名和 CSS Webpack（或其他编程方式）的输出

Question

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

Answer 1

因为您已经在使用 Webpack，我认为一个不错的选择是使用 CSS Modules to accomplish that. You can use either css-loader or 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]'
      }
    }
  ]
}

但是，如果您想要更多 "customized"，您可以指定一个 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 选项的更多信息。

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

希望对您有所帮助！

Answer 2

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

Minify/Mangle CSS JSX 中的类名和 CSS Webpack（或其他编程方式）的输出

Minify/Mangle CSS Classnames in JSX and CSS output from Webpack (or other programmatic means)

javascript

css

reactjs

webpack

postcss