Svelte组件生产构建能否仅保留哈希类名避免样式冲突？

当然可以实现，下面是几种可行的方案：

• 自定义预处理器修改类名
  借助svelte-preprocess写个自定义处理器，在编译阶段把初始类名去掉：

  1. 给模板（markup）加处理器：匹配元素上的class="初始类名 哈希类名"格式，替换成只保留哈希类名；
  2. 给样式（style）加处理器：匹配CSS里的.初始类名.哈希类名选择器，替换成只保留哈希类名的选择器。
     简化版示例代码：

  import sveltePreprocess from 'svelte-preprocess';
  
  const customPreprocess = {
    markup: ({ content }) => {
      const processed = content.replace(/class="([a-z]+) ([a-z]+-[a-zA-Z0-9]+)"/g, 'class="$2"');
      return { code: processed };
    },
    style: ({ content }) => {
      const processed = content.replace(/\.([a-z]+)\.([a-z]+-[a-zA-Z0-9]+)/g, '.$2');
      return { code: processed };
    }
  };
  
  export default {
    preprocess: [sveltePreprocess(), customPreprocess]
  };
  

  注意：这个示例只处理简单场景，实际要考虑多类名、动态绑定类名的情况，得调整正则逻辑。

• 修改Svelte编译器的类名生成逻辑
  Svelte编译器负责生成哈希类名，你可以通过自定义transformer拦截这个过程：

  1. 用svelte/compiler的transformers选项，写个自定义transformer；
  2. 在生成类名的步骤里，直接跳过初始类名的保留，只输出哈希类名。这种方式需要对Svelte编译流程有一定了解。

• 直接用CSS Modules（最省心）
  不想折腾编译逻辑的话，直接用Svelte支持的CSS Modules：

  1. 把组件里的<style>改成<style module>；
  2. 模板里用$style.类名引用样式，编译后只会生成唯一的哈希类名，完全不带初始类名。
     示例：

  <div class={$style.item}></div>
  
  <style module>
    .item {
      /* 你的样式代码 */
    }
  </style>
  

  这是官方推荐的无冲突样式方案，不用额外写自定义逻辑，兼容性也更好。

内容的提问来源于stack exchange，提问作者Georgy