less 本身不支持自动分割 css 文件，仅能通过构建工具（如 webpack、vite）实现按模块输出独立 css；@import 仅用于源码组织，编译后仍合并为单文件。
Less 中没有自动分割样式代码的内置机制
Less 本身不提供“自动分割 CSS 文件”的功能，它只是一个预处理器，编译时把 .less 文件一次性转成单个 .css 输出。所谓“自动分割”，实际是构建流程层面的控制，不是 Less 语法能解决的问题。
用 @import 手动组织模块，但注意编译后仍合并为一文件
@import 是 Less 中拆分源码的唯一原生方式，但它只影响开发时的结构，不影响最终输出粒度：
- 所有被
@import的文件会在编译前拼合成一个逻辑文档，再统一编译 - 即使你写
@import "components/button.less";和@import "layout/grid.less";，默认仍输出一个main.css - 无法靠
@import实现“每个组件输出独立 CSS 文件”——那是构建工具的事
示例：index.less 内容：
@import "variables"; @import "mixins"; @import "components/button"; @import "components/input";
真正实现“分割输出”得靠构建工具链
要让每个 .less 模块生成独立 CSS 文件，必须借助外部工具，比如 Webpack + less-loader 配合 MiniCssExtractPlugin，或 Vite 的 cssCodeSplit 配置：
- Webpack：需将每个
.less作为独立入口（entry），再用MiniCssExtractPlugin提取为单独文件 - Vite：启用
build.cssCodeSplit: true后，会按模块动态 import 关系拆分，但前提是 CSS 被 JS 显式引入（如import './Button.module.less';） - 纯命令行 lessc 不支持多输出，
lessc a.less > a.css && lessc b.less > b.css是唯一“手动批量编译”方式
容易忽略的关键点：CSS 作用域与重复编译风险
当强行把多个 Less 文件分别编译时，以下问题极易发生：
-
@import的变量、mixin 在单文件中不可见——button.less若依赖variables.less，单独编译会报variable @primary-color is undefined - 重复定义导致 CSS 体积膨胀，比如每个文件都
@import "reset.less"，最终多个 CSS 文件里都有同一段重置样式 - 热更新（HMR）可能失效，尤其在 Vite/Webpack 中未正确配置
additionalData注入全局变量时
稳妥做法是：保持一个主入口 index.less，用 @import 统一管理依赖；分割需求交给构建阶段按需提取，而非源码层强行拆散。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
