![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
张小桌
这个作者很懒,什么都没留下…
展开
-
CSS预编译器-less
css预编译器基本原理编写css时,由于css语言本身,常常难以处理一些问题重复的样式值:例如常用颜色、常用尺寸重复的代码段:例如绝对定位居中、清除浮动重复的嵌套书写由于官方迟迟不对css语言本身做出改进,一些第三方机构开始想办法来解决这些问题其中一种方案,便是预编译器预编译器的原理很简单,即使用一种更优雅的方式来书写样式代码,通过一个编译器将其转换为可被浏览器识别的传统css...原创 2020-04-16 19:39:54 · 706 阅读 · 0 评论 -
webpack css工程化之css module
css module {ignore}通过命名规范来限制类名太过死板,而css in js虽然足够灵活,但是书写不便。css module 开辟一种全新的思路来解决类名冲突的问题思路css module 遵循以下思路解决类名的冲突问题:1.css的类名冲突往往发生在大型项目中2.大型项目往往会使用构建工具(webpack等)搭建工程3.构建工具允许将css样式切分为更精细的模块...原创 2020-04-15 21:40:23 · 2003 阅读 · 1 评论 -
css in js
css in jscss in js 的核心思想是 :用一个js对象来描述样式,而不是css样式表例如下面的对象就是一个用于描述样式的对象:const styles = { backgroundColor: "#f40", color: "#fff", width: "400px", height: "500px", margin: "0 auto"...原创 2020-04-15 20:31:42 · 371 阅读 · 0 评论 -
BEM命名规范
BEMBEM是一套针对css类样式的命名方法。其他命名方法还有:OOCSS、AMCSS、SMACSS等等BEM全称是:Block Element Modifier一个完整的BEM类名:block__element_modifier,例如:banner__dot_selected,可以表示:轮播图中,处于选中状态的小圆点三个部分的具体含义为:Block:页面中的大区域,表示最顶级的...原创 2020-04-15 16:17:16 · 848 阅读 · 0 评论 -
利用webpack拆分css
利用webpack拆分css要拆分css,就必须把css当成象js那样的模块, 就必须有一个构建工具(webpack),它具备合并代码的能力而webpack本身只能读取css文件的内容, 将其当做js代码进行分析,因此,会导致错误于是,就必须有一个loader,能够将css代码转换为js代码css-loadercss-loader的作用,就是将css代码转换为js代码,他的处理原理及其简...原创 2020-04-15 15:56:13 · 807 阅读 · 0 评论