vue组件css的最佳处理方式是什么?合并为css文件还是按需组件引入

html-css07

vue组件css的最佳处理方式是什么?合并为css文件还是按需组件引入,第1张

这是个打包的问题。所有组件化都有这个问题。其实题主这个问题,我觉得按照页面级别打包比较好。毕竟用户进了页面a,不一定会进入页面b。按需加载啦。对于组建来说:组件颗粒度很小的时候,页面加载的角度来说整体引入css比较好。但是组建颗粒度不太小的时候,也可以把css加在js里。怎么爽怎么来。至于编出来的代码各种style标签,给浏览器看的代码,没有性能问题就好。es6不还要用babel编译成es5么,不也是各种用我表个态:我是css打在组建里的那一派。你看这个页面就有37个style。阿里旅行双11召唤页合并css派 @Saviio

并不是偏要写成两个,写成两个原因是因为其中一个的样式在别的地方会用到。如果一个div效果一个一个样式的话,那样会重复很多的样式。无形中就会加大网页加载的时间。写成多个,每个分得很细,那样就会很明确。很清晰。可以看出来这个网页美工还是有功底的。

网页的布局、颜色、形状等UI展示方式主要是由Css进行设置,在ReactJs中也是一样。ReactJs中的Css结构方式与传统的Web网页类似,但依然存在一些差异。ReactJs中Css文件本身的编写上并没有差异,我们可以定义特定的样式类名,也可以正对Html元素定义样式。差异主要在React对Css的使用上(微信react-javascript):

l 引用的差异:

传统html文件中css文件引用方式:

<link rel="stylesheet" type="text/css" href="mystyle.css">

ReactJs中css文件引用方式:

你可以直接采用require: require('./Category.css')

你也可以采用import: import styles from './Category.css'

l 使用差异:

传统css的使用方式是设置class: <div class=”center”>test </div>

ReactJs中css的使用方式是设置className(因为class已经成为了关键字)。

<div className='entry'>test </div>

另外

如果你采用require的方式,你可以直接在页面元素中使用css文件中的样式名。

如果你采用import styles from './Category.css'的方式,则应采用以下方式。

<div className={style.entry}>test </div>

l 最终解析文件的差异:

传统css文件一般依然保持着源码状态。

在ReactJS中,Css文件最终将会对css样式名进行转换,例如在index.js文件中,引用style.css:

.customButton{

Width:100px

Heigth:30px

}

将转化为:

.index_customButton_23U0x{

Width:100px

Heigth:30px

}.

其中23U0x是随机数,这样转化的结果将避免最终的单页面中,css样式名不存在同名冲突。

基本上ReactJS的css文件的使用差异到此为止了,你可以按照传统Css样式的定义和使用方式,随意使用了,你可以采用单一样式、设置元素标签样式、组合样式、层级样式等任意方式。