在前端项目开发中，随着页面复杂度提升，样式文件会变得庞大且难以维护，样式冲突问题也频繁出现。通过css import可以实现样式的模块化拆分，让不同功能的样式独立管理，提升代码的可维护性。
css import基础语法
css import是css原生提供的样式引入规则，用于在一个css文件中引入其他css文件的内容，基础语法如下：
/* 引入外部css文件，url可以是相对路径或绝对路径 */
@import url("./reset.css");
/* 也可以省略url()直接写路径 */
@import "./base.css";
/* 支持指定媒体查询条件，只有满足条件时才引入该样式 */
@import "./mobile.css" screen and (max-width: 768px);
需要注意，@import规则必须放在css文件的最顶部，在所有其他规则之前，否则浏览器会忽略该引入规则。
用css import实现模块化样式的步骤
1. 拆分样式模块
首先根据功能拆分不同的样式文件，比如将通用重置样式、基础组件样式、页面独有样式分开：
- reset.css：存放浏览器默认样式重置规则
- button.css：存放按钮组件的通用样式
- header.css：存放页面头部模块的样式
- home.css：存放首页独有的样式
2. 编写独立模块样式
每个模块文件只写对应功能的样式，比如reset.css的内容如下：
/* reset.css 重置浏览器默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
button.css的内容如下：
/* button.css 按钮组件样式 */
.btn {
display: inline-block;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
border: none;
font-size: 14px;
transition: opacity 0.2s;
}
.btn:hover {
opacity: 0.9;
}
.btn-primary {
background-color: #1677ff;
color: #fff;
}
.btn-danger {
background-color: #ff4d4f;
color: #fff;
}
3. 主样式文件引入模块
创建主样式文件main.css，通过@import引入所有拆分好的模块：
/* main.css 主样式入口文件 */ @import "./reset.css"; @import "./button.css"; @import "./header.css"; /* 媒体查询相关的模块放在后面，避免被覆盖 */ @import "./mobile.css" screen and (max-width: 768px);
4. 页面引入主样式文件
在html页面中只需要引入main.css即可，所有模块样式都会被加载：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css import模块化示例</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<header class="header">
<button class="btn btn-primary">首页</button>
</header>
</body>
</html>
使用css import的注意事项
- 加载性能问题：
@import引入的样式会在主css文件加载完成后才会加载，可能导致样式渲染延迟，建议对关键样式优先使用<link>标签引入，非关键样式再用@import。 - 路径规则：引入路径是相对于当前css文件的路径，如果路径错误会导致样式加载失败，开发时需要注意文件路径层级。
- 样式优先级：后面引入的样式会覆盖前面引入的同名样式规则，所以需要注意模块的引入顺序，通用样式放在前面，特殊样式放在后面。
- 兼容性：现代浏览器都支持
@import规则，如果需要兼容非常老的浏览器（如IE8及以下），需要额外做兼容处理或者避免使用。
与其他模块化方案的区别
css import是原生css的能力，不需要额外构建工具支持，适合小型项目或者不需要复杂构建流程的场景。而像css modules、scss的@use等方案需要构建工具配合，支持更丰富的模块化能力比如样式作用域隔离、变量共享等，大型项目可以根据需求选择更适合的方案。
css_import模块化样式样式复用前端开发css模块化修改时间：2026-07-20 03:24:25