是否有任何方法可以用Sass的@import命令导入一个常规的CSS文件?虽然我没有使用sass的所有SCSS语法,但我仍然喜欢它的组合/压缩功能,并且希望能够使用它,而不必将我的所有文件重命名为*.scss
当前回答
在撰写本文时,这似乎还没有实现:
https://github.com/sass/sass/issues/193
对于libsass (C/ c++实现),import对*.css的作用与对*的作用相同。SCSS文件-只需省略扩展名:
@import "path/to/file";
这将导入路径/到/file.css。
更多细节请看这个答案。
参见Ruby实现的答案(sass gem)
其他回答
简单。
@import “路径/到/文件.css”;
如果我是正确的,css与scss兼容,所以你可以将css的扩展名更改为scss,它应该继续工作。一旦你改变了扩展名,你可以导入它,它将包含在文件中。
如果你不这样做,sass将使用css @import,这是你不想要的。
现在可以使用:
@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构件(这是不可能的,但如果发生了,结果将很难调试和危险)。
使用实例导入CSS文件到Sass。
Sass官方文档:将CSS导入Sass