不使用CSS Module时实现webpack css loader LocalIdentName类名效果

方案1：自定义PostCSS插件 + Babel插件（全自动方案，无需改动业务代码） #

这个方案不需要修改现有业务代码，只需要在构建配置里加两个自定义插件即可，是最贴近需求的实现方式：

第一步：实现PostCSS插件处理CSS类名 #

PostCSS插件会在处理每个CSS文件时，读取文件路径提取前缀，自动给所有类名增加路径前缀：

// postcss-component-prefix.js
const path = require('path');
module.exports = () => {
  return {
    postcssPlugin: 'postcss-component-prefix',
    Rule(rule) {
      // 只处理src/components下的组件样式文件，可根据自己的项目结构调整匹配规则
      const filePath = rule.source.input.file;
      if (!filePath.includes('src/components/')) return;
      
      // 提取路径片段：比如src/components/shared/post.css → shared/post
      const relativePath = path.relative(path.join(process.cwd(), 'src/components'), filePath);
      const pathParts = relativePath.split(path.sep);
      // 去掉后缀名，取目录+文件名作为前缀
      const fileName = path.basename(pathParts.pop(), '.css');
      const prefix = [...pathParts, fileName].join('__') + '__';
      
      // 遍历所有选择器，给类名加前缀
      rule.selectors = rule.selectors.map(selector => {
        return selector.replace(/\.([a-zA-Z0-9_-]+)/g, (match, className) => {
          return `.${prefix}${className}`;
        });
      });
    }
  };
};
module.exports.postcss = true;

配置完成后将这个插件添加到postcss.config.js的插件列表中即可生效。

第二步：实现Babel插件处理JSX里的className #

Babel插件会在处理每个TSX/JSX组件文件时，读取路径生成和CSS侧完全一致的前缀，自动替换className属性的字符串值：

// babel-component-class-prefix.js
const path = require('path');
module.exports = function({ types: t }) {
  return {
    visitor: {
      JSXAttribute(path, state) {
        // 只处理className属性
        if (path.node.name.name !== 'className') return;
        // 只处理src/components下的组件文件，和CSS侧规则保持一致
        const filePath = state.filename;
        if (!filePath.includes('src/components/')) return;
        
        // 生成和CSS侧相同的前缀
        const relativePath = path.relative(path.join(process.cwd(), 'src/components'), filePath);
        const pathParts = relativePath.split(path.sep);
        const fileName = path.basename(pathParts.pop(), '.tsx'); // 如果用JSX则把后缀改成.jsx
        const prefix = [...pathParts, fileName].join('__') + '__';
        
        // 替换字符串类型的className
        if (t.isStringLiteral(path.node.value)) {
          const originalClass = path.node.value.value;
          path.node.value = t.stringLiteral(`${prefix}${originalClass}`);
        }
        // 如果项目里有用模板字符串、变量表达式写className的场景，可以自行扩展对应逻辑处理
      }
    }
  };
};

把这个插件添加到项目的Babel配置，或者Vite/Webpack的Babel loader插件列表中即可。

方案2：Vite专属简化方案 #

如果你的项目用Vite构建，可以直接写一个统一的Vite插件同时处理CSS和TSX文件，不需要分开写PostCSS和Babel插件，核心逻辑和上面一致，直接对文件内容做AST解析或者字符串替换即可。

方案3：轻量手动方案（不需要改构建配置） #

如果不想修改构建链路配置，可以封装一个工具函数，每个组件引入时生成对应前缀：

// utils/generateClass.js
export const generateClass = (componentPath) => {
  const prefix = componentPath.replace('src/components/', '')
    .replace(/\.[jt]sx$/, '')
    .replaceAll('/', '__') + '__';
  return (className) => `${prefix}${className}`;
};

组件内使用方式：

import { generateClass } from '@/utils/generateClass';
// __filename为Node.js内置变量，直接传入即可自动识别当前文件路径
const cls = generateClass(__filename);
function Post() {
  return <div className={cls('test')}>内容</div>
}

CSS里的类名手动加上对应前缀即可，适合小型项目快速落地需求。

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