是否有任何方法可以用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)
其他回答
我可以确认这是有效的:
class CSSImporter < Sass::Importers::Filesystem
def extensions
super.merge('css' => :scss)
end
end
view_context = ActionView::Base.new
css = Sass::Engine.new(
template,
syntax: :scss,
cache: false,
load_paths: Rails.application.assets.paths,
read_cache: false,
filesystem_importer: CSSImporter # Relevant option,
sprockets: {
context: view_context,
environment: Rails.application.assets
}
).render
克里斯·爱泼斯坦: https://github.com/sass/sass/issues/193
使用实例导入CSS文件到Sass。
Sass官方文档:将CSS导入Sass
如果你有一个你不想修改的。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
如果我是正确的,css与scss兼容,所以你可以将css的扩展名更改为scss,它应该继续工作。一旦你改变了扩展名,你可以导入它,它将包含在文件中。
如果你不这样做,sass将使用css @import,这是你不想要的。
在遇到同样的问题后,我对这里所有的答案和github中sass库的评论感到困惑。
我想指出的是,截至2014年12月,这个问题已经解决。现在可以直接导入css文件到sass文件中。下面的PR在github解决了这个问题。
语法和现在一样——@import "your/path/to/ The /file",文件名后面没有扩展名。这将直接导入您的文件。如果在末尾添加*.css,它将转换为css规则@import url(…)。
如果你正在使用一些“花哨的”新模块捆绑器,比如webpack,你可能需要在路径的开头使用use ~。所以,如果你想导入以下路径node_modules/bootstrap/src/core。SCSS你可以写@import "~bootstrap/src/core"。
注意: 这似乎并不适用于所有人。如果你的解释器是基于libsass的,它应该可以正常工作(签出这个)。我已经在node-sass上使用@import进行了测试,它工作得很好。不幸的是,这是可行的,但在一些ruby实例上不起作用。