# CSS Modules

CSS Modules is a popular system for modularizing and composing CSS.vue-loader provides first-class integration with CSS Modules as an alternative for simulated scoped CSS.

# Usage

First, CSS Modules must be enabled by passingmodules: true tocss-loader:

// webpack.config.js{module:{rules:[// ... other rules omitted{test:/\.css$/,use:['vue-style-loader',{loader:'css-loader',options:{// enable CSS Modulesmodules:true,// customize generated class nameslocalIdentName:'[local]_[hash:base64:8]'}}]}]}}

Then, add themodule attribute to your<style>:

<stylemodule>.red{color: red;}.bold{font-weight: bold;}</style>

Themodule attribute instructs Vue Loader to inject the CSS modules locals object into the component as a computed property with the name$style. You can then use it in your templates with a dynamic class binding:

<template><p:class="$style.red">    This should be red</p></template>

Since it's a computed property, it also works with the object/array syntax of:class:

<template><div><p:class="{ [$style.red]: isRed }">      Am I red?</p><p:class="[$style.red, $style.bold]">      Red and bold</p></div></template>

And you can also access it from #"https://github.com/css-modules/css-modules" rel="noopener noreferrer">CSS Modules spec for mode details such asglobal exceptions andcomposition.

# Opt-in Usage

If you only want to use CSS Modules in some of your Vue components, you can use aoneOf rule and check for themodule string inresourceQuery:

// webpack.config.js -> module.rules{test:/\.css$/,oneOf:[// this matches `<style module>`{resourceQuery:/module/,use:['vue-style-loader',{loader:'css-loader',options:{modules:true,localIdentName:'[local]_[hash:base64:5]'}}]},// this matches plain `<style>` or `<style scoped>`{use:['vue-style-loader','css-loader']}]}

# Using with Pre-Processors

CSS Modules can be used along with other pre-processors:

// webpack.config.js -> module.rules{test:/\.scss$/,use:['vue-style-loader',{loader:'css-loader',options:{modules:true}},'sass-loader']}

# Custom Inject Name

You can have more than one<style> tags in a single*.vue component. To avoid injected styles to overwrite each other, you can customize the name of the injected computed property by giving themodule attribute a value:

<stylemodule="a">/* identifiers injected as a */</style><stylemodule="b">/* identifiers injected as b */</style>

← Scoped CSS Hot Reload →