汇总最小化类名

问题描述

是否有任何rollup.js插件可以混淆/破坏CSS类名？除了Webpack的https://github.com/sndyuk/mangle-css-class-webpack-plugin

之外，我什么都没找到。

解决方法

这可以通过 rollup-plugin-postcss 实现。根据自述文件，modules 属性的配置选项会传递给 postcss-modules。 使用 generateScopedName 属性，您可以设置类名的格式：

generateScopedName: "[hash:base64:8]",

postcss-modules 自述文件中有更多示例，包括如何动态生成名称。请注意，您有责任确保名称足够独特，不会发生冲突。

完整的汇总配置如下所示：

import postcss from "rollup-plugin-postcss";
... // other imports

export default {
  ... // rest of config
  plugins: [
    ... // other plugins
    postcss({
      ...
      modules: {
        generateScopedName: "[hash:base64:8]",},autoModules: true,}),...
  ],};

然后是这样的：

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
/* styles.module.css */

import STYLES from './styles.module.css';

...

// Use the style however
<div className={STYLES.parent}> 
  ...
</div>

最终看起来像：

.xSgFDOB2 {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

<div class="xSgFDOB2">
  ...
</div>