vue-loader如何配置cssModules

在使用vue cli 2系列进行模块编程时,为避免css冲突,我们常采用vue-loader的scoped和module方法来实现。

CSS Scoped

scoped使用方法最为简单,只需要在文件的标签增加属性即可。

scoped:注意⚠️

但是会有一个问题:子组件的跟节点会受到父组件的影响,这也是scoped本身的特性决定的。例如:

我们在子组件的根结点设置 class,在父组件中也设置 class。

效果为父组件的class影响到了子组件:

解决方法:

改子组件或父组件的class名:改名字是不阔能的,这辈子都不阔能的。如果要改,我们要模块化css有何用?

子组件外再包裹一个无class的元素:确实能解决,但是这种方法我是拒绝的,因为会增加dom

CSS Modules

说到上面的问题,CSS Modules就可以解决:CSS Modules会给每个clsss生成一个唯一的class名,其依据了文件路径等信息,采用hash加随机数得出唯一的class名。

在.vue文件中使用方式如下:

但是我会小改一下,因为不想每次写

本文中心思想:表达了作者…

在vue-cli 2系列中使用CSS Modules时,如果仅仅采用上述方式,会发现很难进行调试了:完全不知道网页渲染出的class对应源码中的哪一个。

所以需要在文件中进行配置,来告诉vue-loader如何生成class名。作者通常采用以下配置来命名:

指定命名完整参考为

命名具体可以参考postcss-modules(https://github.com/css-modules/postcss-modules),以及vue-loader v14(https://vue-loader-v14.vuejs.org/en/features/css-modules.html)

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181031G1WETU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券