Scss 模块导入方式
🎯 引言
学会这篇文章后，你能够理解并使用 Scss 模块化导入的新方式，避免使用已废弃的 @import，掌握 @use 和 @forward 的用法，提升样式代码的可维护性和复用性。通过实战结构建议，让你的项目结构更清晰，效率更高。
🌀 @import（已废弃，仅提及历史原因）
过去我们写 Scss 时，经常用 @import 来导入其他样式文件，比如：
@import 'variables';
@import 'mixins';
这看起来很方便，但它其实有不少问题：
- 导入的文件会被重复编译，导致样式冗余。
- 无法控制命名空间，容易产生全局变量冲突。
- 性能不佳，构建时间长。
因为这些原因，从 Sass 1.23.0 版本开始，官方宣布 @import 已经废弃，推荐改用更加现代的模块系统：@use 和 @forward。
@import，建议尽快迁移，以免未来遇到兼容性问题。🌟 @use 用法
@use 是 Sass 推荐的模块导入方式。它能够将一个 Scss 文件作为模块导入，并且默认启用命名空间，避免变量和混入冲突。
基本格式
@use '路径/文件名' as 命名空间;
例如：
@use 'variables' as vars;
body {
color: vars.$main-color;
}
这里的 variables.scss 里定义了 $main-color，我们通过 vars.$main-color 来访问。
命名空间可以省略
如果你希望直接使用导入文件中的变量，可以用 as * 来省略命名空间：
@use 'variables' as *;
body {
color: $main-color;
}
但要注意，这样可能会导致命名冲突，尤其是在大型项目中不推荐。
@use 的特点
- 默认启用命名空间，防止冲突。
- 只能导入一次，避免重复导入。
- 支持传参给模块（参数化模块）。
- 模块中的内容默认是私有的，只有通过
@forward或公开变量才能暴露。
例子：传参给模块
theme.scss 文件：
$color: blue !default;
body {
background-color: $color;
}
主文件导入时传参：
@use 'theme' with (
$color: red
);
这样可以灵活修改模块中的默认变量。
🚀 @forward 用法
@forward 是 Sass 提供的模块系统的一部分，用来转发模块内容。这在构建样式库或整理多个 Sass 文件时特别有用。
举个例子：
你有很多小模块：
_variables.scss_mixins.scss_functions.scss
你可以创建一个统一的出口文件（比如 index.scss）
@forward 'variables';
@forward 'mixins';
@forward 'functions';
然后，在你的主样式文件中只需要这样导入：
@use 'index' as *;
这样就能一次性使用所有导出的变量和混入，非常方便。
@forward 的作用
- 重新导出模块内容。
- 可以重命名导出的变量或混入。
- 可以隐藏不需要公开的变量。
重命名示例
$color-primary: blue;
@forward 'variables' as vars-*;
@use 'index' as *;
body {
color: vars-color-primary; // 而不是 $color-primary
}
导入后，所有变量都会加上 vars- 前缀，防止冲突。
隐藏内容（不导出）
你可以在模块里用 @forward 的 hide 选项：
@forward 'variables' hide $internal-var;
这样外部模块就不能访问 $internal-var 这个变量了。
🏗️ 实战结构建议
组织 Scss 文件结构时，推荐遵循以下思路：
- 基础样式放
_variables.scss,_mixins.scss,_functions.scss中，定义颜色、字体、工具函数等。 - 使用一个
_index.scss作为聚合文件，使用@forward把基础模块集中导出。 - 组件样式单独建立文件夹，每个组件一个文件，里面使用
@use 'index' as *;引入基础样式。
示例目录结构：
scss/
├── base/
│ ├── \_variables.scss
│ ├── \_mixins.scss
│ ├── \_functions.scss
│ └── \_index.scss
├── components/
│ ├── \_button.scss
│ └── \_card.scss
└── main.scss
_index.scss 内容：
@forward 'variables';
@forward 'mixins';
@forward 'functions';
_button.scss 内容：
@use '../base/index' as *;
.button {
background-color: $primary-color;
@include flex-center;
}
main.scss 内容：
@use 'base/index' as *;
@use 'components/button';
@use 'components/card';
@forward，但随着项目变大，合理使用 @forward 能极大提升维护效率。🧾 小节总结
- Scss 的
@import已废弃，推荐使用@use和@forward。 @use导入文件并默认启用命名空间，防止全局变量冲突。@forward用于转发模块，方便管理和统一导入。- 合理组织 Scss 文件结构，提高代码复用性和维护性。
❓ 知识问答（Q&A）
Q：为什么不推荐继续使用 @import？
A：@import 会重复编译样式，导致性能问题和变量冲突，且已经被废弃，不再更新维护。
Q：如何让 @use 导入的模块变量不加命名空间直接使用？
A：可以使用 as * 语法，但不建议这么做，因为容易引起命名冲突。
Q：@forward 和 @use 有什么区别？
A：@use 是导入模块，@forward 是重新导出模块。@forward 主要用于构建模块的聚合层。
🧪 小练习
- 在一个新的 Scss 项目中，写一个
_variables.scss定义主颜色$main-color: #3498db;，然后用@use导入，并在body里应用这个颜色背景。
$main-color: #3498db;
@use 'variables' as vars;
body {
background-color: vars.$main-color;
}
- 创建一个
_index.scss文件，使用@forward导出_variables.scss和一个自定义_mixins.scss，然后在主文件里用@use导入_index.scss并应用混入。
$primary-color: #e74c3c;
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
@forward 'variables';
@forward 'mixins';
@use 'index' as *;
.container {
@include center;
background-color: $primary-color;
}
🎉 恭喜你已经掌握 Scss 中 @import（了解废弃原因）、@use、@forward 以及实战结构组织技能啦！通过这些现代模块化技巧，你的前端样式代码会变得更加规范、高效、易维护。