是否有任何方法可以用Sass的@import命令导入一个常规的CSS文件?虽然我没有使用sass的所有SCSS语法,但我仍然喜欢它的组合/压缩功能,并且希望能够使用它,而不必将我的所有文件重命名为*.scss
当前回答
我可以确认这是有效的:
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文件导入到scss中只需使用this: @ import“src / your_file_path”; 没有在结尾使用扩展名.css
如果你有一个你不想修改的。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
好消息,Chris Eppstein创建了一个带有内联css导入功能的compass插件:
https://github.com/chriseppstein/sass-css-importer
现在,导入CSS文件就像这样简单:
@import "CSS:library/some_css_file"
这是从3.2版本开始实现和合并的(2015年1月2日为libsass合并了#754,最初的问题定义在这里:sass#193 #556, libsass#318)。
长话短说,下面的语法:
导入(包括)原始css文件,语法是**,结尾没有' .css ' **扩展名(导致实际读取部分' s[ac]ss|css ',并将其内联到SCSS/SASS): @ import“路径/ /文件”; 以传统的方式导入CSS文件,语法按照传统的方式,**以' .css '扩展名**结尾(结果是' @import url("path/to/file.css"); '在你编译的CSS中): @ import“路径/ / file.css”;
它非常好:语法优雅简洁,而且向后兼容!它与libsass和node-sass一起出色地工作。
__
为了避免在评论中进一步猜测,明确地写下:基于Ruby的Sass在经过7年的讨论后仍然没有实现这个特性。在写这篇文章的时候,我们承诺在4.0中会有一个简单的方法来实现这一点,可能是@use的帮助。似乎很快就会有一个实现,新的“计划中的”“提案已接受”标签被分配给#556问题和新的@use特性。
UPD:在2020年10月26日,lib-sass被弃用,因此第556期立即关闭。
__
答案可能会更新,只要有一些变化。
现在可以使用:
@import 'CSS:directory/filename.css';