使用@import可实现CSS模块化，配合Sass等预处理器支持嵌套引入；推荐改用@use以获得更好作用域控制，结合构建工具如Webpack启用CSS Modules，确保类名局部作用域，提升项目可维护性。
在现代前端开发中，CSS 模块化是提升样式可维护性的重要方式。使用 @import 可以实现 CSS 文件之间的嵌套引入，尤其适用于将样式拆分为多个模块文件进行管理。虽然原生 CSS 的 @import 功能较为基础，但在配合预处理器（如 Sass、Less）时，其嵌套能力会更强大。
理解 @import 的基本用法
@import 是 CSS 提供的规则，用于在一个样式表中引入另一个样式表。它必须写在文件的最前面（除 @charset 外），否则无效。
@import 'base.css'; @import 'layout.css'; @import 'components.css';
这样可以将不同功能的样式分离到独立文件中，便于团队协作和维护。
在 Sass/SCSS 中实现嵌套式模块引入
Sass 扩展了 @import 的能力，支持嵌套引入，并可通过部分文件（_partial）组织模块结构。推荐使用 SCSS 语法进行模块化管理。
立即学习“前端免费学习笔记（深入）”；
假设项目结构如下：
styles/ ├── _variables.scss ├── _mixins.scss ├── _button.scss ├── _header.scss └── main.scss
在 main.scss 中可以这样引入并实现逻辑嵌套：
@import 'variables';
@import 'mixins';
<p>// 组件模块
.header {
@import 'header';
}</p><p>.button {
@import 'button';
}注意：- 文件名以下划线开头（如
_variables.scss）表示“部分文件”，不会单独输出为 CSS。 - Sass 中的
@import已被官方标记为弃用，建议改用@use或@forward（见下节）。
使用 @use 进行现代化模块管理（推荐）
Dart Sass 推荐使用 @use 替代 @import，它提供更好的封装性和命名空间控制。
// styles/_config.scss $primary-color: #007bff; $spacing: 8px;
// components/_button.scss
@use '../styles/config';
<p>.button {
padding: config.$spacing * 2;
background: config.$primary-color;
border: none;
color: white;
}// main.scss @use 'components/button';
这种方式避免了全局污染，每个模块拥有独立作用域，更适合大型项目。
结合构建工具实现 CSS 模块化
在 Webpack、Vite 等构建环境中，可以通过 css-loader 启用 CSS Modules，实现类名局部作用域。
例如，在 React 中使用 button.module.css：
.primary {
background: #007bff;
color: white;
padding: 10px 20px;
}在 JS 中导入：
import styles from './button.module.css';
<button class={styles.primary}>提交</button>此时即使多个模块定义 .primary，也不会冲突。
基本上就这些。合理利用 @import（或 @use）、预处理器和构建工具，能有效实现 CSS 的模块化与嵌套管理，提升项目的可扩展性与可维护性。不复杂但容易忽略的是文件路径和作用域控制，需特别留意。
