CSS Modules <style module> doesnt work - laravel

Question

I have Laravel 5.4 project with Vue.js. I wont to use CSS Modules feature that provides by vue-loader. I have vue.js file with code:
<template lang="pug">
.LAYOUT
.SIDE-NAVBAR
.MAIN
</template>
<style module>
.LAYOUT{
height: 100%;
width: 100%;
border: 1px solid red;
}
</style>
<script>
export default {
methods:{
test(){
console.log(this.$style.LAYOUT)
}
},
mounted(){
this.test();
}
}
</script>
When I'm trying to see some information about "this.$style.LAYOUT" in console, it shows that the variable is undefined. May be I should do some settings? How to fix it?
When I'm trying to get value of "this.$style", it returns object:

Answer 1

It may be undefined because you not using that class.
Below is a working example.It also includes how to set dynamic css module class:
<template>
<div>
<button :class="[className1, className2, dynamicClass]" #click="showStyleObject">Click Me</button>
</div>
</template>
<script>
export default {
name: 'example',
props: {
'type-of-button': {
validator: function (value) {
return ['primary', 'secondary', 'default'].indexOf(value) !== -1
}
}
},
data() {
return {
className1: this.$style.button,
className2: this.$style.button2,
}
},
created() {
console.log(this.$style.button)
console.log(this.$style.button2)
},
computed: {
dynamicClass() {
return this.$style[this.typeOfButton]
}
},
methods: {
showStyleObject() {
console.log(this.$style)
}
},
}
</script>
<style module>
.button {
background: red;
}
.button2 {
padding: 8px 10px;
}
.primary {
padding: 8px 10px;
background: blue;
color: white;
border-radius: 10px;
}
.secondary {
padding: 8px 15px;
background: darkslategrey;
color: aliceblue;
border: none;
}
.default {
background: aliceblue;
}
</style>