import styles from './X.module.less' 返回空对象，根本原因是构建工具未识别该文件为 CSS Modules：CRA 默认仅支持 .module.css，需手动配置 Webpack 规则匹配 /.module.less$/ 并启用 css-loader modules；Vite 虽开箱即用，但要求文件名严格为 .module.less、必须默认导入、路径和拼写零误差。
import styles from './X.module.less' 返回空对象？先看构建工具认不认
不是代码写错了，是构建工具根本没把文件当 CSS Modules 处理。CRA 默认只识别 .module.css，对 .module.less 完全无视；Vite 虽支持，但要求三点同时满足：文件名必须是 X.module.less（不能是 X.modules.less 或 X.modle.less）、必须用默认导入（import styles from）、路径和扩展名一个字母都不能错。
常见现象：console.log(styles) 是空对象，className={styles.xxx} 渲染出来是 undefined。这不是 TypeScript 类型问题，也不是 Less 语法错误，而是构建流程压根没走 css-loader 的 modules 分支。
- CRA 项目：必须用
craco或react-app-rewired修改 Webpack 配置，新增test: /\.module\.less$/规则，且要放在普通.less规则之前 - Vite 项目：不用改配置，但控制台若报
Failed to load resource，90% 是路径拼错或扩展名多了一个s - 用
craco时，如果还留着已废弃的lessOptions字段（尤其从旧配置拷贝来的），在less-loader@7.3.0+下会静默失效
Webpack 配置里 modules 怎么写才真正生效
光写 modules: true 不够，CRA 系统默认的 css-loader 配置里，modules 是个对象，不是布尔值。必须显式传入 getLocalIdent 函数，否则哈希类名生成失败，返回空对象。
正确写法示例（craco.config.js）：
立即学习“前端免费学习笔记（深入）”；
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
module.exports = {
webpack: {
configure: (webpackConfig) => {
const oneOfRule = webpackConfig.module.rules.find(rule => rule.oneOf);
const lessRule = oneOfRule.oneOf.find(rule =>
rule.test && rule.test.toString().includes('less')
);
// 插入 .module.less 规则，排在普通 .less 之前
oneOfRule.oneOf.unshift({
test: /\.module\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
getLocalIdent: (context, localIdentName, localName, options) => {
return `${context.resourcePath.split('/').pop().replace('.module.less', '')}_${localName}`.replace(/\./g, '_');
}
}
}
},
'less-loader'
]
});
return webpackConfig;
}
}
};
- 规则顺序很重要：必须
unshift到oneOf数组最前面，否则被普通.less规则提前匹配走了 -
getLocalIdent必须存在，不能只写modules: { auto: true }—— CRA 的 css-loader 版本不认这个 - 如果你用的是 antd-style +
createStyles，那根本不用碰 Webpack 配置，但那就不是纯 CSS Modules + Less 的路径了
Less 文件里怎么写才能兼顾模块化和可维护性
CSS Modules 不阻止你用 Less 的嵌套、变量、混合，但要注意作用域边界。所有顶层类名自动模块化，嵌套选择器里的子类名也受作用域保护，但全局类（比如第三方库的 .ant-btn）必须显式声明为 :global()，否则会被重命名。
例如：
.container {
padding: 16px;
.header {
font-size: 18px;
color: @primary-color;
}
:global(.ant-btn) {
margin-right: 8px;
}
}
- 嵌套写法没问题，
.container .header会编译成类似MyComponent_container__abc .MyComponent_header__def -
:global(.ant-btn)告诉 css-loader：别动这个类名，原样输出，否则它会变成MyComponent_ant-btn__xyz导致样式失效 - 变量（
@primary-color）和混合（.clearfix()）照常使用，它们不参与类名生成，只影响最终 CSS 内容 - 避免在
.module.less里写body、html这种全局选择器——CSS Modules 不处理它们，但容易引发意外覆盖
Vite 和 CRA 的关键差异点在哪
Vite 开箱即用，但“开箱”是有条件的；CRA 需手动配置，但配好就稳定。两者最容易被忽略的其实是错误反馈机制：Vite 编译失败会直接报红，而 CRA 在 modules 配置错误时往往静默返回空对象，让人误以为是代码问题。
- Vite 项目中，
import styles from './X.module.less'报错或为空，第一反应该查文件名是否严格为.module.less，第二反应是检查是否用了命名导入（import { xxx } from）——它只支持默认导入 - CRA 项目中，即使你写了正确的
.module.less，只要 Webpack 规则里漏了modules: { getLocalIdent: ... }，styles就是空对象，且没有任何警告 - 两者都不支持
composes语法（如.btn extends .base），那是老版 css-loader 的特性，现代版本已弃用
真正难调的不是语法，是构建链路里哪一环悄悄跳过了 modules 流程——尤其是 CRA 中那个藏在 oneOf 里的规则顺序，和 Vite 中那个大小写敏感的文件后缀。
