如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接信息。

如果说koalajs合并,还是有些神秘感。那么koalacss合并功能,就显得有些稀松平常了。因为,在css的世界里面,css文件包含是原生支持的。本来就是可以在一个css里面引入另外一个css的,这个是原生支持的功能。而在高级版的css语言,比如less/scss/sass。把css分模块存储,更是稀松平常的事情。所以,这里的koala合并css功能,就显得并不是很神秘。本文中,就说的是:koala如何处理css的原生功能@import "<css_path>.css"

css原生支持引入第二个css

在一个css文件的顶部,写下下面类似的语句,就可以引入第二个css文件了,这个是原生支持的,并不神秘。只是用的人不多罢了。苏南大叔,定义了两个文件,一个css.css,一个sub.css。在sub.css文件中,引入sub.css的语句如下:

@import "sub.css";

值得注意的是:这个@import必须放置在css文件的顶部,否则有可能是失效的。

如何利用koala合并css文件 - css_import
如何利用koala合并css文件(图2-1)

koala支持css原生语句

对于这个原生的@import 语句,koala有两个选择,一个是不做任何处理,交与浏览器去用原生手段处理。另外一个选择是:在做.min.css文件的同时,就把@import 语句给解释为文件包含动作。从而使之成为真正的一个css文件。

控制的开关是:combine import。下面是不同开关下的处理结果对比。

  • 打开combine import的时候,最终的结果显示真实的css代码。
  • 关闭combine import的时候,最终的结果显示调用css@import代码。

如何利用koala合并css文件 - koala-css
如何利用koala合并css文件(图2-2)

结论

对于使用@import语句,引入其它css文件的情况。即使koala没有处理,对应的css文件也是能正常加载处理的,并不需要特别的担心。如果发生了问题,请确认@import语句是否在文件顶部,路径是否正确即可。@import语句中的css路径是相对于当前css路径而言的。切记。

更多koala的经验文章,请点击苏南大叔的博客。

 【源码】代码片段及相关软件点此获取

 【css】秘籍文章入口,仅传授于有缘之人   css    koala

本站的忠实读者小伙伴,正在阅读下面这些文章:

欢迎转载传播本篇原创文章,转载请保留链接及作者信息。
欢迎指正文字或逻辑错误,将会择优在文末列出您的信息。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

苏南大叔需要你的支持

感谢您的打赏,让我更有动力,将更多精彩教程文章,呈现给大家!谢谢!