Below are the steps to use css modules in VueJS,
Enable CSS modules : CSS Modules must be enabled by passing modules: true option to css-loader
// webpack.config.js
{
module: {
rules: [
// ... other rules omitted
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
// enable CSS Modules
modules: true,
// customize generated class names
localIdentName: '[local]_[hash:base64:8]'
}
}
]
}
]
}
}
Add module attribute : Add the module attribute to your <style>
<style module>
.customStyle {
background: blue;
}
</style>
Inject CSS modules : You can inject CSS modules object with computed property $style
<template>
<div :class="$style.blue">
Background color should be in blue
</p>
</template>
It can work with object/array syntax of :class binding.
