在Sass中，@import 是一个常用的指令，用于将多个样式文件合并到一个文件中。然而，如果你希望摆脱对Sass的依赖，并仅使用纯CSS来实现类似的功能，你可以使用以下几种方法：
@import 规则CSS本身也支持 @import 规则，允许你在一个CSS文件中导入另一个CSS文件。虽然这种方式不如Sass的 @import 灵活，但它可以在一定程度上实现类似的功能。
/* main.css */
@import url('reset.css');
@import url('typography.css');
@import url('layout.css');
注意：
- 每个 @import 规则都会导致一个额外的HTTP请求，这可能会影响页面加载性能。
- 浏览器对 @import 的支持是有限的，尤其是在处理多个嵌套的 @import 时。
<link> 标签在HTML中引入多个CSS文件你可以在HTML文件中使用多个 <link> 标签来引入不同的CSS文件。这种方法不会合并文件，但可以让你在HTML中管理样式的加载顺序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="typography.css">
<link rel="stylesheet" href="layout.css">
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
优点： - 简单易用，不需要额外的工具或预处理。 - 可以更好地控制CSS文件的加载顺序。
缺点： - 每个CSS文件都会产生一个HTTP请求，可能会影响性能。 - 无法在CSS文件中直接管理依赖关系。
如果你希望在一个文件中定义一些通用的样式或变量，并在其他文件中使用它们，可以使用CSS变量（自定义属性）。
/* variables.css */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
/* main.css */
@import url('variables.css');
body {
background-color: var(--primary-color);
color: var(--secondary-color);
}
优点： - 可以在多个文件中共享变量。 - 不需要预处理工具。
缺点： - 无法实现复杂的逻辑或嵌套规则。
PostCSS 是一个强大的工具，允许你使用插件来处理CSS文件。你可以使用 postcss-import 插件来实现类似Sass的 @import 功能。
首先，安装 postcss 和 postcss-import：
npm install postcss postcss-import --save-dev
然后，创建一个 postcss.config.js 文件：
module.exports = {
plugins: [
require('postcss-import')()
]
};
接下来，你可以在CSS文件中使用 @import：
/* main.css */
@import 'reset.css';
@import 'typography.css';
@import 'layout.css';
最后，使用PostCSS处理你的CSS文件：
npx postcss main.css -o output.css
优点：
- 可以实现类似Sass的 @import 功能。
- 支持更多的CSS处理插件。
缺点： - 需要安装和配置PostCSS及其插件。
如果你希望完全摆脱任何工具依赖，可以手动将多个CSS文件合并成一个文件。这种方法虽然简单，但在大型项目中可能会变得难以维护。
cat reset.css typography.css layout.css > main.css
优点： - 不需要任何工具或预处理。 - 减少HTTP请求。
缺点： - 手动合并容易出错，尤其是在文件较多时。 - 难以维护和更新。
摆脱Sass依赖并实现单文件样式导入的纯CSS方法有多种选择，具体取决于你的项目需求和偏好。如果你希望保持简单，可以使用CSS的 @import 规则或在HTML中使用多个 <link> 标签。如果你需要更强大的功能，可以考虑使用PostCSS。手动合并文件也是一种选择，但在大型项目中可能不太实用。