浏览器无法直接加载 Sass 或 Less 文件，必须先编译为 CSS；开发阶段用 watch 工具或构建工具（Webpack/Vite）配置对应 loader（sass-loader/less-loader）自动编译，Vue 中可直接用 <style lang="scss">，且需注意 @import 是构建时行为而非运行时请求。
怎么让浏览器加载 Sass 或 Less 写的样式
浏览器根本不认识 .scss 或 .less 文件，直接 <link href="style.scss"> 会 404，且什么都不会渲染。必须先编译成 .css，再引入。
常见错误现象：页面空白、控制台报 net::ERR_ABORTED、开发者工具里看到样式表请求状态是 failed。
- 开发阶段可用实时编译工具（如
sass --watch或lessc --watch），把src/style.scss编译到dist/style.css，然后<link rel="stylesheet" href="dist/style.css"> - 构建流程中（如 Webpack/Vite）应配置对应 loader：
sass-loader或less-loader，它们会在打包时自动编译并注入 CSS，无需手动管理输出文件 - 千万别在 HTML 中写
<link rel="stylesheet" href="style.less">—— 这不是“链接 Less”，是链接失败
Webpack 里 Sass 和 Less 的 loader 配置差异
两者都依赖 Node.js 环境和对应的编译器（sass 或 less 包），但 loader 行为不同，尤其在变量/函数作用域和导入路径上。
使用场景：你用的是 Webpack 5+，已装好 style-loader、css-loader，现在要加预处理器支持。
立即学习“前端免费学习笔记（深入）”；
-
sass-loader默认用 Dart Sass（推荐），需同时安装sass；若用旧版 Node Sass，注意它已弃用且不支持 Node 16+ -
less-loader依赖less包，它的@import默认不解析别名（比如@import "~bootstrap/less/bootstrap"需显式配paths选项） - 两者都建议关闭
sourceMap生产环境输出，否则会多出.css.map请求，影响首屏速度
编译报错：Invalid CSS after “@use” 或 “@value” 是怎么回事
这是语法版本错配的典型表现：@use 是 Sass 4.0+（Dart Sass）引入的模块语法，而旧版 node-sass 完全不识别；@value 则属于早期 PostCSS 插件或实验性 Less 扩展，标准 Less 不支持。
错误信息示例：Invalid CSS after "@use": expected "{", was ";" 或 Unexpected character '@'
- 检查当前用的编译器：运行
npx sass --version或npx lessc --version，确认不是被node-sass拦截了 - Webpack 中若同时装了
node-sass和sass，sass-loader可能默认选前者 —— 删除node-sass并清node_modules再装 - Less 项目里写了
@use？那肯定报错 —— Less 没这语法，那是 Sass 的，别混用
Vite 里怎么开箱即用 Sass/Less
Vite 对预处理器支持比 Webpack 更轻量，默认就内置了 sass 和 less 支持，但前提是本地装了对应包，且文件后缀匹配。
性能影响：Vite 的 HMR（热更新）对 .scss 文件响应很快，但若用了大量 @import 嵌套或全局变量文件，首次启动仍可能卡顿几秒。
- 只需执行
npm install -D sass或npm install -D less，不用额外配 plugin 或 loader -
<style lang="scss">在 Vue 单文件组件中可直接用；普通.scss文件则通过import './index.scss'加载 - 注意：Vite 默认不支持
.sass（缩进语法），只支持.scss；Less 同理，只认.less，不认.les
最常被忽略的一点：预处理器的 @import 和 CSS 的 @import 不是一回事 —— 前者是构建时合并文件，后者是运行时 HTTP 请求。混用会导致样式重复、变量失效、甚至循环导入崩溃。别图省事在 .css 里写 @import "xxx.scss"。
