在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 文件中的样式会被识别并直接生效,但会把所有的变量、函数和混合器限制在一个命名空间下,例如:
    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

相关推荐
好奇心笔记3 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆3 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
我想说一句6 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜7 分钟前
CommonJS与ESM
前端·javascript
G等你下课9 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试
Jackson_Mseven9 分钟前
面试官:说说 startTransition 和 useDeferredValue?我:我用它一行代码救了首页!
前端·javascript·面试
架构个驾驾9 分钟前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js
然我10 分钟前
React 中 useEffect 到底怎么用才不会踩坑?全流程详解 + 实例讲透副作用
前端·javascript·react.js
前端付豪10 分钟前
12、表单系统设计:动态表单 + 校验 + 可配置化
前端·javascript·架构
sophister11 分钟前
你以为的 2025-05-28,其实是另一天:JavaScript 日期解析那些坑与最佳实践
前端·javascript