less的@import无法直接解析node_modules路径，需通过配置paths选项指定模块解析路径；不同构建工具（webpack/vite/命令行）配置方式不同，且应避免使用不安全的javascriptenabled。
Less中@import无法直接解析node_modules路径
Less默认不识别node_modules下的相对路径，比如写@import "normalize.css";或@import "antd/lib/style/index.less";会报File not found错误。这不是语法问题，而是Less编译器没配置模块解析路径。
解决核心是告诉Less：去node_modules里找。不同构建环境做法不同，但原理一致——传入paths选项。
- Webpack用户需在
less-loader的lessOptions.paths里加path.resolve(__dirname, 'node_modules') - Vite用户在
vite.config.ts中配置css.preprocessorOptions.less.paths，同样指向node_modules - 命令行用
lessc时，加--include-path=node_modules参数
引用路径写法必须匹配包的导出结构
很多NPM包（如normalize.css）只提供CSS，没有.less文件；而antd、bootstrap等才带Less源码。直接@import "xxx"可能失败，因为：
-
normalize.css的主文件是node_modules/normalize.css/normalize.css，不是.less，Less不能直接@import纯CSS（除非开启javascriptEnabled且用@import (css)） -
antd的Less入口通常是node_modules/antd/lib/style/index.less，但部分版本要求先@import "antd/dist/antd.less"，得看package.json里的style或main字段 - 有些包（如
react-datepicker）把样式放在dist/react-datepicker.css，这时更适合用CSS import或构建工具链处理，而非Less@import
避免javascriptEnabled: true带来的安全与维护风险
网上常见方案是启用javascriptEnabled，然后用@import (inline) "node_modules/xxx/yyy.css"强行注入。这看似能绕过路径问题，但：
- Less 4.0+已默认禁用该选项，启用后会警告“unsafe JavaScript evaluation”
- 它允许执行内联JS，若依赖包被污染或版本失控，可能引入执行风险
- 生成的CSS无法做source map映射，调试困难；也无法参与Less变量/混入的跨文件复用
- 更稳妥的做法是：只对真正提供Less源码的包用
@import，其他统一走构建工具的CSS处理流程（如css-loader）
实际项目中推荐的混合策略
别指望一个@import通吃所有NPM样式。按类型分治更可靠：
- UI组件库（
antd、element-plus）→ 确认其提供Less源，并在less-loader中配好paths，再@import "antd/lib/style/themes/default.less";定制变量 - CSS重置/工具类（
normalize.css、modern-normalize）→ 不用Less@import，改用HTML<link>或Webpack/Vite的import语句引入CSS - 自定义封装的Less包 → 发布时确保
main字段指向index.less，使用者只需@import "my-utils"（配合paths）
最常被忽略的是：package.json里peerDependencies没锁Less版本，导致本地Less 4.x和包里假设的3.x行为不一致，@import路径解析逻辑就可能失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
