是否有任何方法可以用Sass的@import命令导入一个常规的CSS文件?虽然我没有使用sass的所有SCSS语法,但我仍然喜欢它的组合/压缩功能,并且希望能够使用它,而不必将我的所有文件重命名为*.scss
当前回答
如果你有一个你不想修改的。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
其他回答
这是从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期立即关闭。
__
答案可能会更新,只要有一些变化。
在遇到同样的问题后,我对这里所有的答案和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实例上不起作用。
我想出了一种优雅的、类似rails的方法。首先,将.scss文件重命名为.scss。然后使用这样的语法(例如highlight_js-rails4 gem CSS资产):
@import "<%= asset_path("highlight_js/github") %>";
为什么你不能通过SCSS直接托管文件:
只要以某种方式显式地使用完整路径,在SCSS中执行@import对于CSS文件就可以正常工作。在开发模式下,rails为资产服务而不编译它们,所以像这样的路径可以工作…
@import "highlight_js/github.css";
...因为托管路径就是/assets/highlight_js/github.css。如果你在页面上右键单击“查看源代码”,然后用上面的@import点击样式表的链接,你会看到一行看起来像这样:
@import url(highlight_js/github.css);
SCSS引擎将“highlight_js/github.css”转换为url(highlight_js/github.css)。这将很顺利,直到您决定尝试在预编译资产的生产环境中运行它,并在文件名中注入散列。SCSS文件仍然会解析为一个静态/assets/highlight_js/github.css,这个文件没有预编译,在生产环境中也不存在。
这个解决方案是如何工作的:
首先,通过移动.scss文件到.scss。当然,我们已经有效地把SCSS变成了Rails的模板。现在,每当我们使用<%=…%>模板标记时,Rails模板处理器将用代码的输出替换这些代码段(就像任何其他模板一样)。
在.scss中声明asset_path("highlight_js/github")。Erb文件做两件事:
触发rake assets:precompile任务来预编译适当的CSS文件。 生成一个适当反映资产的URL,而不考虑Rails环境。
这也意味着SCSS引擎甚至不会解析CSS文件;它只是托管了一个链接!所以没有矫揉造作的补丁或粗制滥造的变通办法。我们通过SCSS来提供CSS资产,并使用URL来表示CSS资产。甜蜜的!
使用实例导入CSS文件到Sass。
Sass官方文档:将CSS导入Sass
简单。
@import “路径/到/文件.css”;