关于vue.js:cssrequireModuleExtension和css-Modules

因为之前对 css Modules 不太理解，意识它还得从一个 bug 说起。

缘起

本人搭的一个 vue+ts 我的项目，应用到了 swiper，版本号为

"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1",

按官网文档在 main.ts 中引入

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper /* { default options with global component} */);

demo 也是间接 copy

<template>
    <div class="hello">
        hello
        <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide>Slide 1</swiper-slide>
            <swiper-slide>Slide 2</swiper-slide>
            <swiper-slide>Slide 3</swiper-slide>
            <swiper-slide>Slide 4</swiper-slide>
            <swiper-slide>Slide 5</swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {

    swiperOptions = {
        pagination: {el: '.swiper-pagination',},
        cssMode: false,
        // Some Swiper option/callback...
    };
}
</script>

而后发现 swiper 光有 js 成果，没有 css 款式。

于是在资源中查看

果然，这个款式加了一串前后缀，因为不晓得这是 css Modules 造成的，百度搜寻也无果，于是持续摸索。

解决问题

既然是 js 从 node_modules 引入这个款式后主动更改了类名，那我本地引入是否会变？显然这个想法有点天真，试了下同样会更改。举个最简略例子，间接在 main.ts 同级目录新建一个 css 文件，而后 js 引入，同样会有类名被更改。

由此狐疑是开发编译过程中进行的更改，那是谁？webpack。本工程是 vue-cli 构建的，所以从 vue.config.js 动手，发现这里有 css 配置。而后发现 requireModuleExtension 比拟可疑，正文看看。

运气很好，将其正文之后，款式呈现了

requireModuleExtension 和 css Modules

问题到此解决了。不过引申出新的常识：requireModuleExtension 是啥？上面是 vue-cli 官网的相干形容：

css-requiremoduleextension

CSS Modules

简略来说，css Modules 和 Vue 的 scoped 很像，是用来解决款式全局化的问题。因为在单页中，只有一个 html，引入款式后会对页面上的所有命中的 css 款式失效。但单页中实际上是有多个视图或者页面的，他们应该有本人的作用域，组件间能够互相隔离，于是有了这些计划。

这里有篇比拟具体的介绍了 CSS Modules，点击返回。

阮一峰 -css Modules

回到 vue 的 requireModuleExtension 设置，默认状况下它是true，意思是你想用 css Modules，就要是*.module.[ext] 的文件。比拟有无 module 的区别。

<template>
    <div id="app">
         <div :class="styles.mycss">mycss</div>
         <div :class="styles1.mycss">mycss1</div>
    </div>
</template>

<script>
import styles from './mycss.css';
import styles1 from './mycss.module.css';
export default {
    name: 'app',
    data() {
        return {
            styles,
            styles1,
        };
    },
};
</script>

后果发现 styles.mycss 款式是不失效的。

如果设置 requireModuleExtension 为 false，就是说所有 css,scss,less 等文件都认为是 CSS Modules 模块。此时 styles.mycss 和 styles1.mycss 都是失效的。

后话

留神，应用 CSS Modules 益处在于能够在 js 中作为模块引入，应用对象的形式引入 css 类名。

毛病也很显著，就是书写 css 代码不是很直观，最大的问题是文章结尾的景象，它可能在引入第三方库的 CSS 文件时，因为默认会将 CSS 模块化，导致真正的款式无奈失效。