@import (once) 对纯 CSS 文件无效，因其仅控制 Less 文件解析次数；解决 CSS 重复需用 @import (css) 并配合构建工具统一收敛输出。
@import (once) 对纯 CSS 文件完全无效，它只控制 Less 文件的解析次数，不是防重复输出的开关。
为什么 @import (once) 不能解决 CSS 重复引入
Less 的 @import (once) 只在编译期判断“同一路径字符串是否已解析过”，而纯 CSS 文件（如 normalize.css）根本不会被当作 Less 源码解析——除非你显式加 (less) 修饰符。但加了 (less) 就会触发语法报错，因为 CSS 规则（如 html { margin: 0; }）不符合 Less 语法规则。
所以你看到的“重复 CSS”，往往不是 @import (once) 失效，而是：
- 误用
@import "normalize.css"导致编译中断，或退化为浏览器运行时@import url()请求（性能差、不可控） - 多个入口文件各自写了
@import (css) "xxx.css"，Less 不合并它们，最终 CSS 输出里出现多份相同规则 - Webpack/Vite 把
style.css和index.less同时打进 bundle，造成物理层重复
@import (css) 是唯一安全方式，但必须满足三个条件
要让第三方 CSS 真正“只引入一次且不报错”，必须用 @import (css)，并确保：
- 写在主入口文件（如
main.less）的最顶部，前面不能有任何变量、@import或样式规则 - 路径带
~别名（如@import (css) "~normalize.css/normalize.css"），否则 less-loader 无法定位 node_modules - 整个项目禁用其他地方的 CSS 引入：删掉所有
link[rel=stylesheet]、所有import './xxx.css'，避免浏览器加载和编译输出双重复
真正去重靠构建工具，不是 Less 语法
Less 层面没有“合并相同 CSS 规则”的能力。即使你只写了一次 @import (css)，如果 Webpack 把 normalize.css 和你自己的 base.less 分别打包进两个 chunk，浏览器仍会加载两遍。
解决方案是交由构建工具统一收口：
- Webpack 中配
MiniCssExtractPlugin，确保所有 CSS 最终合并到一个文件 - Vite 中启用
build.cssCodeSplit: false，关掉 CSS 代码分割 - 用
postcss-discard-duplicates插件，在 PostCSS 阶段扫描并删除重复规则（对@import (css)输出有效）
容易被忽略的关键点
最常踩的坑不是语法写错，而是混淆了“编译期去重”和“运行时去重”。@import (once) 解决不了 CSS 重复，@import (css) 也解决不了加载顺序导致的样式覆盖。最终 CSS 是否干净，取决于构建配置是否把所有样式流收敛到单一出口——而不是 Less 文件里写了几个 @import。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
