在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

相关推荐
然我21 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子26 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
DanB241 小时前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子10 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录10 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图20910 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode10 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~11 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安12 小时前
React hooks——useReducer
前端·javascript·react.js