vue-loader v15版本 css modules配置

Question

配置CSS Modules不起效果，
当尝试和官网文档一样去配置的时候，加上这段代码，所有的css样式全部失效
配置图：

效果图

去掉红色款代码图

试用了modules的代码

<template>
    <header :class="$style.mainHeader">
        <h1>JTodo</h1>
    </header>
</template>
<script>
    // console.log(this.$style.mainHeader)
</script>
<style lang="stylus" module>
    .main-header {
        text-align center
        h1 {
            font-size 100px
            background-image: linear-gradient(#32ff19, #26a3a4);
            -webkit-background-clip: text;
            text-fill-color: transparent;
            -webkit-text-fill-color: transparent;
            margin 20px
        }
    }
</style>

使用了modules后原先header样式失效
原先效果图

Answer 1

其实这次提问我自己有点乱没表达清楚我的想法
付费进行了提问，得到了满意的回复
modules开启会导致重新定义所有的选择器，所以页面元素的匹配就乱了
至于header的样式未启用是因为配置原先这个是写在vue-loader.config.js里面的，后面忘记将camelCase开启了
这里还有一种的写法 :class="$style['main-header']"