Rollup 缩小类名

Question

是否有任何 rollup.js 插件允许混淆/破坏 CSS 类名？除了 webpack 之外，我什么也没找到： https: //github.com/sndyuk/mangle-css-class-webpack-plugin

Answer 1

这可以通过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>

最终看起来像：

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

...

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

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