vue中使用css modules替代scoped

html-css018

vue中使用css modules替代scoped,第1张

  最开始使用Vue的时候,是提倡并大量使用的是scoped的。

  加上 scoped 属性的style会自动添加一个唯一的属性 。比如data-v-0467f817为组件内 CSS 指定作用域,编译的时候 .errShow会被编译成类似 .errShow[data-v-0467f817]。

  这种添加唯一的属性的方法可以满足日常组件局部css作用域的开发需求,但其设计上有一定缺陷,.errShow[data-v-0467f817]并不能保证是唯一的,另外在性能上也不是很好,浏览器搜索.errShow[data-v-0467f817]的速度并不如.errShow,相比于这种方式,CSS modules则做的更彻底,它不是添加属性,而是直接改变类名。

CSS Modules

CSS Modules既不是官方标准,也不是浏览器的特性,而是在构建步骤中对CSS类名选择器限定作用域的一种方式(通过hash实现类似于命名空间的方法)。类名是动态生成的,唯一的,并准确对应到源文件中的各个类的样式。

用法

配置

如果你的项目是用vue-cli搭建的,那么脚手架已经为你配置好了,直接可以使用,如果你是用webpack自己搭建的项目或想要修改默认配置,则进行下面配置。

css-loader关于CSS modules的默认配置如下:

可以使用vue-loader的css Modules选项为css-loader进行自定义的配置

  走访了好几个移动框架,来回切换了几次,发现都不是很适合我使用,要么是组件不够用,要么是组件无法二次封装。我在自己的项目中大多是需要使用框架之样式,所以思来想去还是用比较熟悉的mui移动框架( 官方网址 )。但是mui是没法使用npm进行安装的(一大遗憾),思来想去于是将mui框架所需的js,css文件放在static目录下:

在index.html中以静态资源的方式进行引用。

当然想要在组件中直接使用mui这个变量,需要在build/webpack.base.conf.js文件中进行配置

如需引用mui框架的样式只需要引入mui中的class样式

以上是我在项目中遇到问题的一些解决方案,谢谢。