rollupjs - 汇总缩小类名

Question

是否有任何允许混淆/修改 CSS 类名称的 rollup.js 插件？我没有找到任何东西，除了 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>

最终看起来像：

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

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