Less中@import引入.css文件无效，因Less默认原样输出@import语句而不解析；需配置css-loader的importLoaders: 2使其处理less-loader输出的@import，或改用postcss-import统一管理混合依赖，并确保服务器正确返回.less文件的text/css MIME类型。
Less里用@import引入.css文件为什么没效果
因为Less默认把@import当成本地.less文件处理，遇到.css后缀会直接原样输出@import url(...)语句，不编译、不内联、不解析——浏览器收到的还是原始@import，而现代CSS规范已禁用跨域@import加载本地路径，结果就是静默失败。
webpack中css-loader的importLoaders参数必须设为2
当Less文件里@import了.css，而你又用了postcss-loader（比如加了autoprefixer），那光配less-loader不够。Webpack链路是：less-loader → css-loader → postcss-loader，但css-loader默认只向前传递1层@import（即只处理.css里的@import），对Less传来的@import视而不见。
必须显式设置：
use: [
'style-loader',
{
loader: 'css-loader',
options: { importLoaders: 2 } // ← 关键：让css-loader也处理less-loader吐出的@import
},
'postcss-loader',
'less-loader'
]
否则@import "reset.css"在Less里会被忽略，编译后连那行@import都消失。
更稳妥的做法：用postcss-import替代Less原生@import
Less的@import不支持条件导入、不自动去重、无法跨loader通信；而postcss-import专为现代构建设计，能正确解析.css和.less混合依赖，并统一排序、去重、报错。
操作步骤：
- 删掉Less文件里所有
@import "xxx.css" - 在
postcss.config.js中启用：plugins: [require('postcss-import')] - 把CSS文件改用
postcss-import语法引入：@import 'reset.css';（注意：此时写在.css文件里，不是.less） - 确保
postcss-loader在css-loader之前执行（顺序不能错）
这样reset.css会被真正读取、解析、合并进最终CSS，而不是留在HTML里等浏览器自己拉。
别忽略MIME类型和服务器配置
即使构建没问题，开发时直接打开index.html仍可能404——尤其IIS或某些静态服务默认不识别.less后缀，返回404而非text/css。
验证方式：
- 在浏览器地址栏输入
http://localhost:3000/src/styles.less，看是否返回200 +Content-Type: text/css - 如果返回404，不是代码问题，是服务器没配MIME：
.less → text/css - 更省事的临时解法：把
reset.css重命名为reset.css.less，再用Less原生@import引入——绕过服务器校验
真实项目里，.css文件被@import却无反应，八成卡在这三处：loader链漏了importLoaders、混用了Less和PostCSS的@import机制、或者服务器根本没放行.less后缀。先查Network面板里那个CSS文件是不是真的回来了，再往下翻配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
