在前端开发中，Sass作为CSS预处理器能提升样式编写效率，但部分场景下我们需要去掉Sass依赖，仅用纯CSS完成样式管理，其中引入外部样式表是核心操作之一。纯CSS引入外部样式表不需要依赖任何预处理器工具，只需要遵循原生CSS的语法规范即可实现。
纯CSS引入外部样式表的基础方法
纯CSS引入外部样式表最常用的是@import规则，该规则可以直接在CSS文件中导入其他CSS文件的内容，语法非常简单。
基础语法格式
@import的语法格式如下，需要注意的是该规则必须放在CSS文件的最顶部，也就是所有样式规则之前，否则会失效。
/* 引入同目录下的reset.css文件 */ @import "reset.css"; /* 引入相对路径下的样式文件 */ @import "../styles/common.css"; /* 引入绝对路径下的样式文件 */ @import "/static/css/base.css"; /* 定义媒体查询条件引入样式 */ @import "mobile.css" screen and (max-width: 768px);
路径书写注意事项
路径的书写需要符合CSS的URL解析规则，常见的路径类型有以下几种：
- 相对路径：基于当前CSS文件的位置来定位目标文件，比如
./theme.css表示同目录下的theme.css，../assets/style.css表示上一级目录assets文件夹下的style.css。 - 绝对路径：从网站根目录开始定位，以
/开头，比如/css/main.css表示根目录下css文件夹中的main.css。 - URL路径：可以直接写完整的网络地址，比如
https://ipipp.com/css/lib.css，不过需要注意跨域问题。
在HTML中引入CSS文件的补充方式
除了在CSS文件中用@import引入外部样式，我们还可以在HTML文件中通过link标签引入多个CSS文件，这种方式也是纯CSS开发中的常用方案。
link标签引入语法
在HTML的head区域中添加link标签即可，示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS引入样式示例</title>
<!-- 引入基础样式 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入主题样式 -->
<link rel="stylesheet" href="css/theme.css">
<!-- 引入响应式样式 -->
<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 768px)">
</head>
<body>
<div class="container">内容区域</div>
</body>
</html>
两种引入方式的区别
我们可以通过下面的表格对比两种引入方式的特点：
| 对比项 | @import引入 | link标签引入 |
|---|---|---|
| 加载时机 | 页面加载完成后才会加载引入的CSS，可能会有闪烁问题 | 页面加载时同步加载CSS，渲染更及时 |
| 兼容性 | IE5以上支持，老版本浏览器可能有问题 | 所有浏览器都支持，兼容性更好 |
| 使用场景 | 适合在CSS文件中拆分模块样式 | 适合在HTML中引入全局公共样式 |
常见问题与解决办法
引入后样式不生效
如果出现引入的样式不生效的情况，可以先检查以下几点：
- 如果是
@import引入，确认规则是否放在了CSS文件的最顶部，前面不能有任何样式规则或者其他字符。 - 检查路径是否正确，可以通过浏览器开发者工具的Network面板查看对应的CSS文件是否加载成功，状态码是否为200。
- 确认样式选择器的优先级，引入的样式可能被后续样式覆盖，可以通过调整引入顺序或者提升选择器优先级解决。
去掉Sass后的样式适配
如果之前用Sass写了变量、混合宏等功能，去掉Sass后可以改用CSS原生变量来替代，示例如下：
/* 定义CSS原生变量，替代Sass变量 */
:root {
--primary-color: #409eff;
--font-size-base: 14px;
}
/* 使用变量 */
.btn-primary {
background-color: var(--primary-color);
font-size: var(--font-size-base);
}
/* 引入外部变量样式文件 */
@import "variables.css";
/* 引入组件样式 */
@import "button.css";
@import "form.css";
通过这种方式，我们可以在去掉Sass依赖的前提下，依然保持样式模块化的开发方式，仅用纯CSS就能完成外部样式表的引入和样式管理，降低项目的构建复杂度，提升样式的可维护性。