sass 的 @import 是编译期文件合并，而 css 的 @import 是运行时 http 请求；前者支持变量/混合宏复用，后者性能差且不支持跨文件复用，且 sass 5.0+ 已废弃对 .css 文件的降级处理。
为什么 @import 在 Sass 里不能直接替换成 CSS 的 @import
Sass 的 @import 是编译期行为，不是运行时加载；它会把目标文件内容直接插入当前文件，再整体编译成一份 CSS。而原生 CSS 的 @import 是浏览器在渲染时发起 HTTP 请求（或触发 @import 规则解析），性能差、阻塞渲染、不支持变量/混合宏跨文件复用。
常见错误是写成 @import "reset.css" 却期望它像 Sass 文件一样参与变量继承——结果变量报错、@mixin 找不到、甚至编译出一堆重复的 CSS。
- 只对
.scss或.sass后缀文件做逻辑合并，对.css后缀默认降级为原生 CSS@import（Sass 5.0+ 已废弃该行为） - 路径必须相对或基于
includePaths配置，不能用网络 URL（如@import "https://cdn.example/reset.scss"会报错） - 如果被导入文件以
_开头（如_variables.scss），它不会被单独编译成 CSS，只能靠@import引入
如何组织 _variables.scss 和 _mixins.scss 才不互相污染
核心原则：单向依赖 + 显式声明。变量和混合宏必须在使用前定义，Sass 不支持“先用后定义”或循环引用。
-
_variables.scss只放$color-primary、$spacing-sm这类纯值，不包含@mixin或@function -
_mixins.scss可以@import "_variables"，但反过来绝对不行——否则_variables.scss一旦引入 mixin 就变成“有副作用的模块”，其他地方@import "_variables"会意外触发样式输出 - 所有基础层文件（变量、函数、重置）统一在入口文件
index.scss顶部按顺序@import，避免深层嵌套导入导致依赖链模糊
用 @use 替代 @import 后，为什么 color-primary 突然访问不到
@use 是模块化语法，强制封装作用域：变量、混合宏、函数默认不自动注入全局命名空间，必须通过命名空间调用，比如 theme.$color-primary。
- 写法必须是
@use "theme" as theme，然后用theme.$color-primary；如果省略as theme，默认命名空间就是文件名（如theme.$color-primary） -
@use不允许多次导入同一路径（即使别名不同），重复会报错"theme" has already been loaded - 旧项目迁移时，
@import和@use不能混用同一文件——Sass 不允许一个文件同时被两种方式加载，否则编译失败 - 第三方库（如
sass:math）必须用@use "sass:math"，不能@import "sass:math"
怎么让 node_modules 里的 Sass 包（如 bulma）正确参与构建
关键不是“能不能 import”，而是“路径能不能被 resolve”。Sass 默认只查当前目录和 includePaths 列表，node_modules 不在其中。
- CLI 编译需加参数：
sass --load-path=node_modules main.scss - Webpack +
sass-loader需配置additionalData或implementation，更稳妥的是在sassOptions里加includePaths: ["node_modules"] - 用
@use导入时，路径要写全：例如@use "bulma/sass/utilities/variables"，而不是@use "bulma"（bulma 没提供顶层 index 文件） - 注意版本兼容：Bulma 0.9+ 支持
@use，老版本只能用@import，且部分变量需手动@import "bulma/sass/utilities/_all.sass"
真正难的不是写对一行 @use，而是当团队里有人改了 _functions.scss 里的一个 @function 返回值类型，却没同步更新所有调用它的 @mixin，这种隐式契约没人检查，直到某天 CI 编译报错才暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
