SCSS中@import "reset.css"无效，因SCSS默认仅处理.scss/.sass文件；正确写法是省略后缀@import "reset"，使其查找并内联reset.scss等；若必须用.css，则应重命名或改用JS import配合css-loader。
SCSS里@import引入.css文件为什么没效果
SCSS的@import默认只处理.scss和.sass后缀文件；直接@import "reset.css"会被原样输出为CSS的@import语句，不解析、不内联、不编译——这正是你看到“没效果”的根本原因。
想让.css文件被SCSS编译器读取并内联，必须加引号+省略后缀
SCSS规定：只有当@import路径不含.css扩展名，且文件实际存在时，编译器才尝试按SCSS规则处理它（前提是该文件内容语法合法）。所以正确写法是：
-
@import "reset"→ 编译器会依次查找reset.scss、reset.sass、_reset.scss、_reset.sass -
@import "base"→ 若存在_base.scss，则导入并内联；若只有base.css，则忽略（不报错但也不处理） - 绝对不要写
@import "reset.css"，它永远只是生成一条@import url("reset.css");
遇到“xxx.css未被识别”错误的典型场景
常见于从CSS迁移老项目时，误以为SCSS能自动接管所有@import。此时你会看到：
- 编译后CSS里多出一条
@import url("variables.css");，但变量根本用不了 - 报错
Undefined variable "$primary-color"，而变量明明定义在variables.css里 - Webpack报
Can't resolve 'xxx.css'，其实是loader链没配好，不是SCSS本身问题
根本解法不是改@import写法，而是把.css重命名为.scss（哪怕内容一字不改），再用@import "variables"引用。
立即学习“前端免费学习笔记（深入）”；
webpack中.css文件要参与构建，得靠loader，不是@import
如果你真需要保留.css后缀（比如第三方库），那就别走SCSS的@import路径，改用JS侧导入：
-
import "@/styles/reset.css"→ 由css-loader+style-loader处理 - 确保webpack配置中
rules包含对.css的处理规则，且顺序在sass-loader之后 - 注意：这种导入方式和SCSS的
@import完全无关，不会获得变量/混入继承能力
真正容易被忽略的是：SCSS的@import机制和浏览器/CSS原生@import是两套东西，前者发生在构建时，后者发生在运行时；混用会导致加载时机错乱、变量不可见、调试困难。
