在SCSS文件中导入常规CSS文件？

简单。

@import“路径/到/file.css”;

如果我没错，css与scss兼容，那么您可以将css的扩展名更改为scss，它应该可以继续工作。更改扩展名后，您可以导入它，该扩展名将包含在文件中。

如果您不这样做，sass将使用css @import，这是您不想要的。

如果您有.css不想修改的文件，也没有将其扩展名更改为.scss（例如，该文件来自您未维护的分支项目），则始终可以创建符号链接，然后将其导入到.scss。

创建一个符号链接：

ln -s path/to/css/file.css path/to/sass/files/_file.scss

将symlink文件导入目标.scss：

@import "path/to/sass/files/file";

您的目标输出.css文件将保存导入的符号链接.scss文件中的内容，而不是CSS导入规则（@yaz以最高的评论票数提及）。而且您没有具有不同扩展名的重复文件，这意味着在初始.css文件中进行的任何更新都会立即导入到目标输出中。

Symbolic link (also symlink or soft link) is a special type of file that contains a reference to another file in the form of an absolute or relative path and that affects pathname resolution.
– http://en.wikipedia.org/wiki/Symbolic_link

您必须在要包含的css文件之前加一个下划线，然后将其扩展名切换为scss（例如：）_yourfile.scss。然后，您只需要这样调用它：

@import "yourfile";

并且它将包含文件的内容，而不是使用CSS标准@import指令。

简单的解决方法：

所有或几乎所有css文件都可以解释为好像是scss。它还可以将它们导入块中。将css重命名为scss，然后将其导入。

在我的实际配置中，我执行以下操作：

首先，我将.css文件复制到一个临时文件中，这次扩展名为.scss。Grunt示例配置：

copy: {
    dev: {
        files: [
            {
                src: "node_modules/some_module/some_precompiled.css",
                dest: "target/resources/some_module_styles.scss"
            }
        ]
    }
}

然后，您可以从父级scss导入.scss文件（在我的示例中，它甚至被导入到块中）：

my-selector {
  @import "target/resources/some_module_styles.scss";
  ...other rules...
}

注意：这可能很危险，因为它将有效地导致css将被多次分析。检查您的原始CSS，以确保它包含任何可解释的CSS工件（这不太可能，但是如果发生，则结果将很难调试且很危险）。

大家好消息，克里斯·埃普斯坦（Chris Eppstein）创建了一个具有嵌入式CSS导入功能的指南针插件：

https://github.com/chriseppstein/sass-css-importer

现在，导入CSS文件非常简单：

@import "CSS:library/some_css_file"

在撰写本文时，这似乎尚未实现：

https://github.com/sass/sass/issues/193

对于libsass（C / C ++实现），导入的工作*.css方式与*.scss文件相同-只是省略扩展名：

@import "path/to/file";

这将导入path/to/file.css。

有关更多详细信息，请参见此答案。

查看此答案以了解Ruby实现（无礼的宝石）