Mustache渲染模板后类名被追加m_-开头随机串的修复方法

这明显是你的Mustache渲染环境（大概率是搭配了构建工具或框架插件）自动给类名加上了作用域前缀（比如m_-开头的随机串），用来避免样式冲突，但没同步处理你内嵌在模板里的CSS，导致样式匹配不上。给你几个实用的解决办法：

1. 关闭类名哈希/作用域功能 #

先排查是哪个工具在做这个处理——常见的是Webpack的css-loader开启了modules选项，或者某些模板渲染插件自带了样式隔离功能。找到对应的配置项，关闭类名自动修改：

比如Webpack的css-loader配置，把模块化选项设为false：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: false // 关闭CSS模块化，类名不再被修改
            }
          }
        ]
      }
    ]
  }
};

如果是Mustache相关插件的配置，找类似scopeClassNames、addHashToClasses这类开关，把它关掉即可。

2. 声明全局样式 #

如果不能关闭哈希功能，可以把你的样式标记为全局样式，这样工具就不会修改这个类名，同时让CSS能匹配到带前缀的类名。在CSS里用:global()包裹目标类：

:global(.some-style) {
  border: 1px solid black;
}

这样即使模板里的类名变成m_-818537353464745some-style，CSS的:global()声明也会匹配这个带前缀的类名，样式就能正常生效。

3. 将样式移到外部CSS文件并同步处理 #

把内嵌在模板里的<style>内容移到单独的外部CSS文件，然后通过构建工具引入这个文件。这样工具在处理CSS时，会同步给CSS里的类名加上相同的随机前缀，和模板渲染后的类名保持一致，样式自然就能匹配上：

• 新建styles.css文件：

.some-style {
  border: 1px solid black;
}

• 在你的项目入口或组件中引入这个CSS文件，确保构建工具（如Webpack、Vite）会处理它，这样模板和CSS里的类名会被统一修改，样式就能正常生效。

4. 手动匹配动态类名（不推荐） #

如果以上方法都不可行，你可以通过JavaScript动态匹配带前缀的类名并添加样式，但这种方法繁琐且不稳定（随机串每次渲染可能变化），仅作为临时方案：

// 匹配包含some-style的类名元素
const targetElement = document.querySelector('[class*="some-style"]');
if (targetElement) {
  targetElement.style.border = '1px solid black';
}

优先推荐前三种方法，尤其是关闭不必要的类名哈希功能，或者使用全局样式声明，这两种方案最直接高效。

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