css.requireModuleExtension和cssModules

因为之前对cssModules了解不多，所以要先从一个bug说起才知道。源于自己搭建的一个vue+ts项目，使用了swiper，版本号为"swiper":"^5.4.5","vue-awesome-swiper":"^4.1.1"，根据官方文档在main.ts引入importVueAwesomeSwiperfrom'vue-awesome-swiper';import'swiper/css/swiper.css'Vue.use(VueAwesomeSwiper/*{全局组件的默认选项}*/);demo也是直接copy然后发现swiper只有js效果，没有cssstyle查了下资源，果然这个style有一系列的后缀和后缀。由于不知道这是cssModules引起的，百度搜索也无果，于是继续摸索。问题解决由于js从node_modules导入这个样式后会自动改变类名，那我本地导入会不会改变？显然这个想法有点幼稚，试一试就会改变。举个最简单的例子，直接在main.ts同级目录下新建一个css文件，然后导入js，类名也会改。所以怀疑是开发编译过程中的改动，那是谁？网页包。这个项目是用vue-cli搭建的，所以从vue.config.js开始，发现这里有css配置。然后发现requireModuleExtension有点可疑，看看注释。好在注释掉之后，样式中出现了requireModuleExtension和cssModules的问题，到这里问题就解决了。不过又扩展了新知识：什么是requireModuleExtension？以下是vue-cli官网的相关说明：css-requiremoduleextensionCSSModules简单来说，cssModules和Vue的scoped很像，用来处理样式全球化的问题。因为单个页面只有一个html，引入样式后，会对页面上所有命中的css样式生效。但是一个页面里面其实有多个视图或者页面，它们应该有自己的作用域，组件之间可以相互隔离，所以才有了这些解决方案。这里有更详细的CSSModules介绍，点击进入。阮一峰-cssModules返回vue的requireModuleExtension设置。默认情况下是true，也就是说如果要使用cssModules，必须是*.module.[ext]文件。比较有没有模块的区别。<模板>mycss