本文翻译自：Import regular CSS file in SCSS file?

Is there anyway to import a regular CSS file with Sass's @import command? 无论如何，是否可以使用Sass的@import命令导入常规CSS文件？ While I'm not using all of the SCSS syntax from sass, I do still enjoy it's combining/compressing features, and would like to be able to use it without renaming all of my files to *.scss 尽管我没有使用sass的所有SCSS语法，但我仍然喜欢它的合并/压缩功能，并且希望能够在不将我的所有文件重命名为* .scss的情况下使用它

参考：https://stackoom.com/question/Tq3O/在SCSS文件中导入常规CSS文件

Good news everyone, Chris Eppstein created a compass plugin with inline css import functionality: 大家好消息，克里斯·埃普斯坦（Chris Eppstein）创建了一个具有嵌入式CSS导入功能的指南针插件：

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

Now, importing a CSS file is as easy as: 现在，导入CSS文件非常简单：

现在可以使用：

If you have a .css file which you don't wish to modify, neither change its extension to .scss ( eg this file is from a forked project you don't maintain ), you can always create a symlink and then import it into your .scss . 如果您有不想修改的.css文件，也没有将其扩展名更改为.scss （ 例如，该文件来自您不维护的分支项目 ），则始终可以创建符号链接，然后将其导入您的.scss 。

Creates a symlink: 创建一个符号链接：

Imports symlink file into a target .scss : 将symlink文件导入到目标.scss ：

Your target output .css file is going to hold contents from imported symlink .scss file, not a CSS import rule ( mentioned by @yaz with highest comment votes ). 您的目标输出.css文件将保存导入的symlink .scss文件中的内容，而不是CSS导入规则（ @yaz以最高的评论票数提及 ）。 And you don't have duplicated files with different extensions, what means any update made inside initial .css file immediately gets imported into your target output. 而且您没有具有不同扩展名的重复文件，这意味着在初始.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 – http://en.wikipedia.org/wiki/Symbolic_link

After having the same issue, I got confused with all the answers here and the comments over the repository of sass in github. 在遇到相同的问题之后，我对这里的所有答案以及对github中sass存储库的评论感到困惑。

I just want to point out that as December 2014, this issue has been resolved. 我只想指出，截至2014年12月，此问题已解决。 It is now possible to import css files directly into your sass file. 现在可以将css文件直接导入到您的sass文件中。 The following PR in github solves the issue. github中的以下PR解决了该问题。

The syntax is the same as now - @import "your/path/to/the/file" , without an extension after the file name. 语法与现在相同-@ @import "your/path/to/the/file" ，文件名后没有扩展名。 This will import your file directly. 这将直接导入您的文件。 If you append *.css at the end, it will translate into the css rule @import url(...) . 如果在末尾附加*.css ，它将转换为css规则@import url(...) 。

In case you are using some of the "fancy" new module bundlers such as webpack , you will probably need to use use ~ in the beginning of the path. 如果你正在使用的一些“花哨”的新模块捆扎机如的WebPack ，你可能需要使用用途~在路径的开始。 So, if you want to import the following path node_modules/bootstrap/src/core.scss you would write something like 因此，如果要导入以下路径node_modules/bootstrap/src/core.scss ，则应编写如下内容 @import "~bootstrap/src/core" . @import "~bootstrap/src/core" 。

NOTE: 注意： It appears this isn't working for everybody. 看来这并不适合所有人。 If your interpreter is based on libsass it should be working fine (checkout this ). 如果您的解释器是基于libsass那么它应该可以正常工作（请libsass 此内容 ）。 I've tested using @import on node-sass and it's working fine. 我已经在node-sass上使用@import进行了测试，并且工作正常。 Unfortunately this works and doesn't work on some ruby instances. 不幸的是，这可行，在某些红宝石实例上不起作用。

I can confirm this works: 我可以确认这项工作：

Credit to Chriss Epstein: https://github.com/sass/sass/issues/193 归功于克里斯·爱泼斯坦： https : //github.com/sass/sass/issues/193