css文件中@import less报“cannot find module”是因为css标准不支持加载.less文件，浏览器和css-loader只识别.css，遇到@import "xxx.less"会直接丢弃或报错；正确做法是将.less导入到另一个.less文件中，再由less-loader→css-loader链路处理。
为什么 CSS 文件里 @import Less 会报 “Cannot find module”
因为 CSS 标准不支持 @import 加载 .less 文件——浏览器和 css-loader 都只认 .css，遇到 @import "xxx.less" 会直接当无效语法丢弃，或抛出解析错误。这不是路径问题，是类型错配。
常见错误现象：CSS Resolver error: 'utils.less' wasn't found、Can't resolve 'xxx.less'、甚至整行 @import 消失不见。
- 别在
.css文件里写@import "xxx.less"—— 它永远不会被编译，只会被忽略或报错 - 想复用 Less 逻辑，必须把
.less导入到另一个.less文件中，再由构建链路（less-loader→css-loader）统一处理 - 如果硬要从 CSS 触发 Less 编译，唯一合法路径是：用
postcss-import替代原生@import，并确保它在less-loader之后、css-loader之前运行
为什么 Less 文件里 @import CSS 还是 404
Less 默认把 @import "reset.css" 当作“原样输出指令”，不解析、不内联、不走 Webpack 路径解析；最终生成的 CSS 里还是 @import url("reset.css")，而浏览器按 HTML 页面位置去加载，不是按源文件位置。
典型失败路径：src/styles/main.less 里写 @import "../assets/css/reset.css" → 编译后变成 @import url("../assets/css/reset.css") → 浏览器请求 dist/assets/css/reset.css（但实际在 dist/static/css/reset.css）。
- 根本解法：删掉 Less 里的
@import (css)，改用css-loader的importLoaders: 2配置，让它接管所有@import语句 - 更推荐：弃用 Less 原生
@import，引入postcss-import，它能统一解析.css和.less，且路径基准始终是项目根目录 - 临时绕过：把 CSS 放进
public/目录，用绝对路径@import (css) "/static/reset.css"，但失去构建时检查和哈希指纹能力
为什么加了 ~@/ 还是找不到模块
~ 是 Webpack loader 层的信号，但它只对 less-loader 有效；如果 less-loader 没正确接入，或者配置顺序错了，~ 就会被当普通字符忽略，路径仍按 Less 文件所在目录解析。
错误示例：@import "~@/styles/vars.less" 报 '@/styles/vars.less' wasn't found，说明 less-loader 根本没触发 alias 解析。
- 确认
less-loader已安装且版本兼容：CRA v4 必须用less-loader@7.3.0，新版不兼容 Webpack 4 - 检查 Webpack
resolve.alias是否定义了@，且路径是path.resolve(__dirname, 'src')这类绝对路径 - 确保
less-loader配置里没漏掉lessOptions或写错字段名（lessOptions在less-loader@10+已废弃，会静默失效） - Vue CLI 或 Vite 用户注意：
vue-style-loader或vite-plugin-less可能覆盖默认行为，需单独配paths或lessOptions.paths
为什么 import styles from './X.module.less' 返回空对象
Webpack 没把 .module.less 当作 CSS Modules 处理——它被交给了普通 less-loader 规则，跳过了 css-loader?modules 链路，所以类名没哈希、没导出、返回空对象。
关键条件缺一不可：文件名必须是 .module.less、Webpack rule test 必须精确匹配 /\.module\.less$/、该规则必须排在普通 <code>.less 规则前面、use 链里必须含 <code>css-loader 且 modules: true 并传 getLocalIdent
- 规则顺序错：把
.module.less规则放在.less规则后面，会导致所有.module.less被普通规则捕获 - 漏掉
importLoaders: 2：如果 Less 里用了@import，没这个参数，css-loader不会处理嵌套导入，模块化失效 - less-loader 版本错：用
less-loader@10+配 CRA v4，会报this.getOptions is not a function，降级到@7.3.0才稳定 - TypeScript 用户额外注意：要加
types/css-modules.d.ts声明，否则import styles会类型报错，即使运行时正常
~ 看似简单，背后依赖的是整个 loader 链路的完整性和顺序正确性。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
