@use不能直接引入.css文件,因其仅支持.scss/.sass模块;正确做法是新建下划线开头的包装文件(如_normalize.scss),用CSS规范的@import引入CSS,再通过@use调用该包装文件。

@use 不能直接引入 .css 文件,这是设计使然
写 @use "normalize.css" 必然报错,错误信息类似 Invalid CSS after ""。因为 @use 只解析 Sass 模块(.scss 或 .sass),遇到纯 CSS 开头的 /* 就直接拒绝。这不是路径写错了,是语法层级不匹配。
你真正需要的不是“让 Sass 去找 CSS”,而是把 CSS “包装”成一个合法的 Sass 模块。这个包装层必须满足两个条件:文件名以 _ 开头(如 _normalize.scss),且内部只用 CSS 规范的 @import 引入目标 CSS。
-
@import语句必须在顶层、无缩进、无其他 Sass 逻辑包裹,否则会被当作 Sass 语法解析而失败 - 包装文件里不能出现
@use、$variable、@mixin等任何 Sass 特性 - 最终输出的 CSS 会保留原
@import url(...)语句,由浏览器加载
路径写错的典型表现和验证方法
即使包装好了,@use "_normalize" 还是报 File to import not found,说明路径没对上。Sass 查找路径始终以当前 .scss 文件为基准,不是 HTML 页面位置,也不是 Webpack 的 resolve.alias。
常见错误包括:
立即学习“前端免费学习笔记(深入)”;
- 写了
@use "src/assets/_normalize"—— 这是相对路径,但 Sass 不会自动补.scss,也不认src/这种项目根写法 - 用了
@use "~/assets/_normalize"却没配 Webpack 的resolve.alias或 Vite 的resolve.alias,~就只是字面字符 - 实际文件叫
_normalize.scss,但导入时写成@use "normalize"(缺下划线)或@use "_normalize.css"(错扩展名)
验证方式:打开浏览器开发者工具 → Network → 刷新页面 → 看是否有 404 请求,点进去看 “Request URL” 是什么,再对比文件真实路径。
includePaths 配置生效的前提和陷阱
includePaths 只对 @use 和 @import 中的裸名起作用(比如 @use "normalize"),它不会影响 @use "./path/to/file" 这种相对路径。
配置前必须确认三点:
- 路径必须是绝对路径,例如
path.resolve(__dirname, 'src/assets'),而不是字符串"src/assets" - 路径末尾不能带斜杠:
"src/assets/"在某些 Dart Sass 版本中会被忽略 - 配置位置因构建工具而异:Angular CLI 要写在
angular.json的stylePreprocessorOptions.includePaths;Vite 要写在vite.config.ts的css.preprocessorOptions.sass.includePaths
即使配对了,@use "normalize" 仍可能失败——因为 includePaths 只查 normalize.scss 或 _normalize.scss,如果文件名是 normalize.css,它根本不会被扫描。
图片路径在 Sass 中失效的根本原因
当 _normalize.scss 里没图片,但你的 button.scss 里有 background: url("../images/icon.png"),编译报错“找不到图片”,问题不在 CSS 引入路径,而在 Webpack/Vite 的 url-loader 或 asset-module 解析逻辑。
Sass 编译器只负责文本替换,url() 里的路径由后续 loader 处理。关键点:
- 如果
@import是在<style lang="scss">里写的,loader 默认把url()当作相对于该.vue文件的位置解析 - 如果
require('./styles/button.scss')是在 JS 里引入的,loader 才按button.scss自身位置解析url() - 统一解法:在
url()前加~前缀(如url("~@/assets/images/icon.png")),前提是构建工具已将@alias 到项目 src 目录
路径问题从来不是单点故障,而是 Sass 解析、构建工具模块解析、loader 资源处理三层逻辑叠加的结果。改一处,得同步核对另外两处是否对齐。


















