use webpack4 to build a vue project. CSS Modules, is configured in the configuration file, but it doesn"t work and doesn"t report an error!
the following is the code for the module option in the configuration file
module: {
rules: [
{
test:/\.html$/,
use:["html-loader"]
},
{
test: /\.vue$/,
loader: "vue-loader",
options: {
cssModules: {
localIdentName: "[path][name]---[local]---[hash:base64:5]",
camelCase: true
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader"}
]
},
{
test: /\.scss$/,
use: [
{ loader: "style-loader"},
{ loader: "css-loader"},
{
loader: "px2rem-loader",
// options here
options: {
remUni: 75,
remPrecision: 8
}
},
{ loader: "sass-loader" }
]
}
]
},here is the code for the vue component
<template>
<div>
<h1 class="home" :class="$style.home">home</h1>
<p :class="$style.title">888
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" module>
@import "../../assets/css/reset.scss";
.home{
color: blue;
font-size: 80px;
}
</style> normally the class name generated by cssmodule should be displayed, but now there is nothing
