在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

相关推荐
雨过天晴而后无语9 分钟前
Windchill中MVC选中事件级联另一MVC内容
java·javascript·html·mvc
qq. 280403398411 分钟前
react hooks
前端·javascript·react.js
Gazer_S1 小时前
【前端状态管理技术解析:Redux 与 Vue 生态对比】
前端·javascript·vue.js
Y学院1 小时前
vue的组件通信
前端·javascript·vue.js
患得患失9491 小时前
【ThreeJs】【伪VR】用 Three.js 实现伪 VR 全景看房系统:低成本实现 3D 级交互体验
javascript·3d·vr
teeeeeeemo2 小时前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
加洛斯3 小时前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
Keepreal4964 小时前
Electron基本概念
前端·javascript·electron
Whbbit19994 小时前
在 Nestjs 中使用 Drizzle ORM
前端·javascript·nestjs
Never_Satisfied4 小时前
在JavaScript中,map方法使用指南
前端·javascript·vue.js