在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

相关推荐
森林的尽头是阳光10 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
YiHanXii10 小时前
React.memo 小练习题 + 参考答案
前端·javascript·react.js
zero13_小葵司10 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js
Yolanda_202210 小时前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js
Pu_Nine_910 小时前
深入理解节流(Throttle):原理、实现与应用场景
javascript·性能优化·es6·节流·lodash 库
伍哥的传说10 小时前
Vite Plugin PWA – 零配置构建现代渐进式Web应用
开发语言·前端·javascript·web app·pwa·service worker·workbox
ai产品老杨10 小时前
解锁仓储智能调度、运输路径优化、数据实时追踪,全功能降本提效的智慧物流开源了
javascript·人工智能·开源·音视频·能源
GDAL10 小时前
Quat.js四元数完全指南
javascript·quaternion
alphageek811 小时前
Electron开源库入门教程:跨平台桌面应用框架
javascript·其他·electron·开源
小桥风满袖11 小时前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript