使用css module时, 父组件会将子组件style的类选择器加上hash后缀, 但是html标签是原样, 导致子组件引用不到样式效果

来源：5-1 首页-抽象组件设计（1）

至心

2018-08-26

比如子组件style中设`.class{background:red}`, dom中设置:`class="$style.class"`.

编译之后变成:

style中是: `.class_???`(hash后缀),

dom中是: `class="class"`.

两者不匹配, 导致样式不能生效.

一更

父组件: header引用子组件btn.

图: 父组件header.vue

//img.mukewang.com/szimg/5b8208c30001cd0009060484.jpg

图: 子组件btn.vue

//img.mukewang.com/szimg/5b8208d10001c49906530637.jpg

webpack.config.js配置:
```

module: {
rules: [
{
test: /\.html$/,
loader: 'html-loader'
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
cssModules: {
localIdentName: '[path][name]---[local]---[hash:base64:5]',
camelCase: true
},
extractCSS: true,
loaders: env.production ? {
css: ExtractTextPlugin.extract({
use: 'css-loader!px2rem-loader?remUnit=40&remPrecision=8',
fallback: 'vue-style-loader'
}),
scss: ExtractTextPlugin.extract({
use: 'css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader',
fallback: 'vue-style-loader'
})
} : {
css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8',
scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader'
}
}
}, /*{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}*/
{
test: /\.scss$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// 开启 CSS Modules
modules: true,
// 自定义生成的类名
localIdentName: '[local]_[hash:base64:8]'
}
}, {
loader: 'px2rem-loader',
// options here
options: {
remUni: 40,
remPrecision: 8
}
},
'sass-loader'
]
}
]
},

```

同类问题页: https://coding.imooc.com/learn/questiondetail/72270.html

写回答

2回答

小学生6年级

2018-11-10

你的问题不在于父组件而在于子组件，每一个组件只要用了 modules，那么就要使用 $style.xxx 来访问。而不能再是像之前那样了。例如组件中是

    <div :class="[$style.btn,cname]" @click="test">
    
        methods:{
            test() {
                console.log(this.$style.btn)
            }
        }

也就是此时不再是挂载在 vue实例的 $data 下面了。是挂载在 $style 属性下面。

看这个浏览量还算多一些，就蛮回答下。

老师回答你们的问题有时候答非所问应该是没有考虑到小白是没有底线的。要动动脑啊啊啊啊啊