是否有任何方法可以用Sass的@import命令导入一个常规的CSS文件?虽然我没有使用sass的所有SCSS语法,但我仍然喜欢它的组合/压缩功能,并且希望能够使用它,而不必将我的所有文件重命名为*.scss


当前回答

好消息,Chris Eppstein创建了一个带有内联css导入功能的compass插件:

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

现在,导入CSS文件就像这样简单:

@import "CSS:library/some_css_file"

其他回答

使用实例导入CSS文件到Sass。

Sass官方文档:将CSS导入Sass

如果我是正确的,css与scss兼容,所以你可以将css的扩展名更改为scss,它应该继续工作。一旦你改变了扩展名,你可以导入它,它将包含在文件中。

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

如果你有一个你不想修改的。css文件,也不要把它的扩展名改成。scss(例如,这个文件来自一个你不维护的fork项目),你可以创建一个符号链接,然后把它导入到你的。scss中。

创建一个符号链接:

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

将符号链接文件导入目标.scss:

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

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

符号链接(也称为符号链接或软链接)是一种特殊类型的文件 它包含以绝对格式对另一个文件的引用 或者相对路径,这会影响路径名解析。 ——http://en.wikipedia.org/wiki/Symbolic_link

现在可以使用:

@import 'CSS:directory/filename.css';

简单的解决方案:

所有或几乎所有的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构件(这是不可能的,但如果发生了,结果将很难调试和危险)。