Scss 的四种导入方式你都知道吗

想把样式拆模块、做主题、又不想全局变量乱飞?这篇把 SCSS 的四种"导入/组织"方式 一次讲透:@use@forward、Sass 旧式 @import、以及 CSS 的 @import url(...)。含示例、对比表、迁移步骤与避坑清单。


@import "xxx":Sass 旧式导入(已弃用

作用
编译期 把被导入的 SCSS 内容"直接拼接"到当前位置,变量/混入进入全局 ,容易重复加载、顺序踩坑。Dart Sass 已弃用 ,推荐使用@use/@forward

示例

scss 复制代码
@import "./tokens";   // 编译时把 tokens.scss 的内容贴进来(非 CSS 运行时)

@import url(...)CSS 的导入

作用

浏览器在运行时 请求外部 CSS 文件;不会引入 Sass 的变量/混入/函数。

示例

arduino 复制代码
@import url("/base.css");           /* 或者 @import "/print.css" print */

位置限制

必须在样式表最前面 (在任何普通规则前;前面最多有 @charset / 其它 @import)。影响性能,一般不建议使用。


@use:模块化导入(推荐

作用

将另一个 SCSS 文件当作"模块"加载,默认通过命名空间 访问变量/函数/混入;只加载一次、不污染全局,避免命名冲突。

示例

less 复制代码
/* tokens/_color.scss */
$primary: #0b81ff !default;
@mixin btn { padding: 8px 12px; border-radius: 8px; }

/* app.scss */
@use "./tokens/color" as c; // 起别名 c

.button {
  color: c.$primary;
  @include c.btn();
}

配置默认变量(with + !default)

less 复制代码
@use "./tokens/color" as c with (
  $primary: #0052d9   // 仅能配置标了 !default 的顶层公开变量
);

要点

  • 命名空间:@use "x" as x;不建议as *(去掉前缀,易冲突)。
  • 变量只读:c.$primary 不能在引入方直接赋值,只能用 with加载时配置。

@forward:聚合/转发导出

作用

把若干模块"转发 "出去,做一个统一出口 (barrel/index)。自己文件里不能直接使用 转发来的成员;若要自用,再 @use 一次。

示例

less 复制代码
/* design/_index.scss ------ 聚合出口 */
@forward "../tokens/color" show $primary, btn;  // 只暴露想给外部用的成员
@forward "../tokens/spacing" as space-*;        // 导出时加前缀

/* app.scss ------ 使用统一出口 */
@use "./design/index" as d;

.card {
  color: d.$primary;
  margin: d.$space-lg;
}

在出口处预配置主题(with)

less 复制代码
/* design/_index.scss */
@forward "../tokens/color" with ($primary: #333);

注意:一个模块只能被配置一次 。上游已通过 @forward ... with 配过,下游再配会报错。


五分钟速查表

能力/特性 @use @forward Sass @import "x" CSS @import url(...)
发生时机 编译期 编译期 编译期 运行时(浏览器请求)
命名空间 有(可 as * 去掉) 对外导出,不给本文件用 无(全局拼接)
去重加载 ❌ 可能重复 N/A(浏览器请求)
变量可配置 通过 with 配置 !default 通过 with 预配置并转发 通过"先定义后导入"覆盖(老做法)
全局污染
位置限制 任意 任意 任意(编译期) 顶部(在普通规则前)
适用场景 模块化使用 统一出口/SDK 旧项目遗留 引入纯 CSS(不推荐)

常见误区 & 快速排坑

  1. @import url('./variable.scss') 用后 $color 未定义

    • 这是 CSS 导入,不会带来 Sass 变量。
    • 用:@use "./variable" as v;color: v.$color;
  2. 我在文件里写 $primary: red,为啥 @use 来的变量没变?

    • @use 是模块隔离;你改的是当前文件$primary,不是模块里的。
    • 正确:@use "./tokens" with ($primary: red); 且源变量需 !default
  3. 去命名空间 as *@import 一样吗?

    • 不是。as * 只是省掉前缀,仍是模块系统(只加载一次、不污染全局)。
    • 有冲突风险:多个模块导出同名变量会报错。
  4. @forward 文件里用不了转发来的变量?

    • 对。@forward 只是出口;若当前文件要用,@use 一次
  5. 位置问题:为啥我的 @import 被忽略?

    • CSS 的 @import 必须在最顶部 (普通规则之前)。Sass 旧式 @import 不限位置,但已经弃用。

迁移指北:从 @import@use/@forward

目录建议

arduino 复制代码
styles/
  tokens/
    _color.scss     // 变量均加 !default
    _spacing.scss
  mixins/
    _typography.scss
  design/
    _index.scss     // 聚合出口(只 forward)
  app.scss          // 项目入口(只 use design)

改造步骤

  1. 给需要对外可配的变量都加 !default

  2. 建"总出口":

    less 复制代码
    /* design/_index.scss */
    @forward "../tokens/color";
    @forward "../tokens/spacing";
    @forward "../mixins/typography";
  3. 入口使用:

    css 复制代码
    /* app.scss */
    @use "./design/index" as d with (
      $primary: #0052d9,
      $space-lg: 24px
    );
    
    .btn { color: d.$primary; margin: d.$space-lg; }
  4. 删除旧式 @import,逐步把业务文件改为 @use 指向 design/_index.scss


结语

  • 新项目:只用 @use + @forward
  • 做 SDK/设计系统:@forward 聚合成一个总入口 ,外部只 @use 它。
  • 变量可配:源头加 !default,引入处用 with
  • 避免 @import 与 CSS 的 @import url(...)(性能差、易踩坑)。

需要我按你的项目目录,直接给一份可跑的 @use/@forward 模板吗?把目录贴过来我就给你落地版。

相关推荐
云飞云共享云桌面3 小时前
SolidWorks对电脑的硬件配置要求具体有哪些
java·服务器·前端·网络·数据库
鹏程十八少3 小时前
11. Android <卡顿十一>深入ASM与Transform进行插桩,手写微信Matrix插件,打造自己的Matrix工具(卡顿进阶)
前端
小桥风满袖3 小时前
极简三分钟ES6 - 箭头函数
前端·javascript
bug_kada3 小时前
前端后端3步联调:Cookie认证实战,让登录功能完美上线!
前端·javascript
stringwu3 小时前
Flutter开发者必备:状态管理Bloc的实用详解
前端·flutter
青晚舟3 小时前
作为前端你必须要会的CICD
前端·ci/cd
hj5914_前端新手3 小时前
深入分析 —— JavaScript 深拷贝
前端·javascript
中微子3 小时前
虚拟列表完全指南:从零到一手写实现
前端
jqq6663 小时前
解析ElementPlus打包源码(二、buildFullBundle)
前端·javascript·vue.js