β

[less/sass]如何避免因公共模块导致生成重复css代码

Axiu Blog 190 阅读

webpack 是目前比较流行,通用性也很好的打包工具。特别是利用它的丰富的插件库,在项目结构比较固定的场合,基本能做到一个(份)配置文件,放到所有项目里都通用的效果。但是由于配置项比较多,而且版本间差异,通常都要试多次才能达到效果。也正是因为这样,许多新人在面对 webpack 的时候,都会选择逃避文档阅读,退而求其次,用 ctrl+c/v 来解决。

我就是那个笃信 ctrl+c/v 大法的新人。

最近的项目里用到许多公共文件,由于是用 less 直接编译成 css 的,所以很少会看最终的生成文件,那天临下班摸鱼的时候,打开文件,滚啊滚,突然发现有好多重复的代码,看起来是重复打包……遇到这种情况怎么办,邀请小伙伴一起来解决问题吗?No No No,当然要趁着没什么人发现,偷偷解决掉。

查看项目文件,发现用到很多公共的文件,比如 config.less mixins.less common.less 等等,还有一些两三个文件共用的部分,这些东西混杂在一起,共同编译出了一份 css 文件,可想而知,除了一些常用的 config 会直接替换/插入,其他比如 extend 出的样式,或者公用的模块样式,就被反复生成到目标文件中了。

less的处理方法

查看 less 的文档,发现对于这个问题是有解的。那就是用 reference关键字

语法是这样

@import (reference) "foo.less";

除非用了 mixins 或者 extended 语法,其他的部分都不会生成到目标文件里。

但是除了 config ,通常还会有一大部分公共 css 还是要生成一次,不然 header footer 都不显示可咋整?

less 另外有关键字 once ,语法是这样

@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored

这个其实是默认值,就是说 @import "foo.less"; 默认就会只引用一次,这里写出来,是为了区别 multiple

@import (multiple) "foo.less";
@import (multiple) "foo.less";

这里,文件内容就会生成两次。

这几个关键字咋配合使用?

1、用 reference 写需要 extend 还有 mixins 元素,以及定义的变量,这些属于公共元素,但是不需要生成具体的css;

2、写一份公共的样式( common.less ),然后在目标公共文件里(例如 public.less 或者类似的文件)引用一次。

这样,就能维护一份干净的配置文件,如果前端模式较固定,这份配置文件也能到处使用。

sass的处理方法

sass 相对于 less ,更适合用 gulp 这类工具,配置项也相对比较简单,功能上也不输 less 。在模块化方面, sass 采用了下划线开头的文件不生成css的方式:例如在 public.scss 里引用 _common.scss ,最终只会生成一份 public.css 文件。

转载请注明来源: [less/sass]如何避免因公共模块导致生成重复css代码
本文链接地址: https://axiu.me/coding/prevent-less-and-sass-common-part-generate-duplicate-css-code/
作者:Axiu Blog
又一个WordPress博客

发表评论