在sass/scss中@import跟@use的区别

---

highlight: a11y-dark theme: cyanosis --- 新版将弃用 Sass @import 规则和全局内置函数,如果使用@import报错的话可以使用@use或者@import url('')来替代.

@use 和 @import 的区别

1. 功能与现代性

   • @import是早期的引入方式，比如全局命名冲突、难以管理等，已被标记为即将废弃。
   • use是 SCSS 最新推荐的模块系统，增强了模块化和作用域管理。

2. 作用域

   • @import会将引入文件中的所有内容(变量、函数、混合器等)直接放在全局作用域中，可能会造成命名冲突等问题。
   • @use会引入文件的内容，通过 @use 引入的 SCSS 文件中的样式会被识别并直接生效，但会把所有的变量、函数和混合器限制在一个命名空间下,例如:

       // utils.scss 
       $primary-color: #3498db;
       
       // test.scss
       @use './utils.scss';   // 这时默认使用的是文件名作为命名空间
       body { color: utils.$primary-color; }
       
       // test2.scss
       @use './utils.scss' as u;  // 可以通过 `as` 自定义命名空间
       body { color: u.$primary-color; }
       
       // test3.scss
       @use './utils.scss' as *;   // 如果确实需要不使用命名空间，可以使用 `*`（不推荐）
       body { color: $primary-color; // 直接使用 }

3. 代码复用与优化

   • @use会确保文件只会被加载一次,即使是在多个地方引用也不会重复执行
   • @import会在每次引入文件时都会重复编译该文件的内容,可能导致性能问题

总结建议

建议优先使用@use替代@import