在前端开发中，CSS 是我们不可或缺的一部分。而 SASS 作为 CSS 预处理器，能够让我们更加高效、便捷地编写 CSS。但在实际开发中，我们可能会遇到需要引用本地外部的 CSS 文件的情况，那么该如何处理呢？
方法
通过 SASS 引用本地外部 CSS 文件可以使用 @import 语句。它可以让你在 SASS 文件中引用本地外部的 CSS 文件。
以 _variables.scss 中定义一些基本的颜色变量为例：
// _variables.scss $white: #fff; $black: #333; $gray: #e5e5e5;
如果我们想引用 style.css 中的样式，只需在 SASS 文件中添加以下代码：
// style.scss @import "style.css";
则 SASS 编译器会将 style.scss 文件中的内容和 style.css 文件中的内容合并成一个 CSS 样式表。
注意事项
文件名
被引用的 CSS 文件名应该带有 .css 后缀，同时也可以省略后缀名。因此，在 SASS 文件中，如果我们引入 style.css 文件，则需要写成：
// 不带后缀 @import "style"; // 带后缀 @import "style.css";
相对路径
在 SASS 文件中引用 CSS 文件时，文件路径应该是相对于当前的 SASS 文件的。
例如，如果我们将 style.css 文件放在与 style.scss 文件相同的目录中，则引用它的代码应该用相对路径：
// 引用同级目录下的 style.css @import "./style.css";
如果文件在不同的目录中，则需要编写相对路径，如：
// 引用代码所在目录下的 styles 目录中的 style.css @import "../styles/style.css";
文件位置
在引用 CSS 文件时，我们需要确保文件已经被正确的放置。通常情况下，被引用的 CSS 文件应该置于 SASS 文件所在位置的同级目录下。
示例代码
// _variables.scss $white: #fff; $black: #333; $gray: #e5e5e5; // style.scss @import "./style.css";
-- -------------------- ---- -------
-- --------- --
---- -
------ -------
----------------- ------
------------ ------ -----------
-
--- --- -- -
------ -------
------------ -------- ------
-
- -
------ -------
----------------- -------
------- -
----------------- ------
-
-结论
本文中，我们介绍了如何在 SASS 文件中引用本地外部的 CSS 文件。需要注意的是，被引用的 CSS 文件名应该带有 .css 后缀，文件路径应该是相对于当前 SASS 文件的，同时也需要确保文件被正确的放置。
通过这种方式，我们可以将之前写的纯 CSS 文件集成到 SASS 代码中，让我们更加高效地进行 CSS 的编写和管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b2942d91dce0dc887ef29