To implement scoped styles in Vue using CSS modules, you need to enable and configure them in the build tool; in Vite or Vue CLI, you only need to write the styles within the <style module> tag, the class name will automatically compile to a unique hash and accessed through the $style object to avoid global conflicts, and support preprocessors and named modules, but not dynamic class names.

To use CSS Modules for scoped styling in Vue, you need to enable and configure them in your project — especially if you're using a build setup like Vue CLI, Vite, or Webpack. CSS Modules allows you to write CSS that's automatically scoped to components, avoiding global style conflicts without relying on scoped attributes.

Here's how to use CSS Modules effectively in a Vue project:

? Enable CSS Modules in Your Build Tool

In Vite (most common now):

Vite supports CSS Modules by default. Just name your CSS file with the pattern:
[name].module.css or [name].module.scss

Example:

 <!-- MyComponent.vue -->
<template>
  <div :class="$style.container">
    <h1 :class="$style.title">Hello World</h1>
  </div>
</template>

<style module>
.container {
  padding: 20px;
  background-color: #f5f5f5;
}

.title {
  color: #333;
  font-size: 24px;
}
</style>

With this naming convention ( module in the filename or module in the <style> tag), Vite treats the styles as CSS Modules. The compiled class names will be unique and mapped via $style .

? You can also use .module.scss , .module.less , etc., for pre-processors.

In Vue CLI / Webpack

Vue CLI also supports CSS Modules out of the box when using the correct naming or configuration.

Use a file named:

 MyComponent.module.css

Then import it in your component:

 <template>
  <div :class="styles.container">
    <h1 :class="styles.title">Hello</h1>
  </div>
</template>

<script>
import styles from &#39;./MyComponent.module.css&#39;;
export default {
  name: &#39;MyComponent&#39;,
  data() {
    return { styles };
  }
};
</script>

Alternatively, use <style module> in .vue files (recommended):

 <style module>
.container {
  margin: 1rem;
}
.title {
  font-weight: bold;
}
</style>

The compiled class names are exposed via the $style computed property (or you can name the module):

 <template>
  <div :class="myStyle.container">
    <h1 :class="myStyle.title">Custom Module Name</h1>
  </div>
</template>

<style module="myStyle">
/* ... */
</style>

This gives you a local variable myStyle with the mapped class names.

? How CSS Modules Scope Styles

CSS Modules don't rely on attribute selectors like scoped . Instead:

• Class names are compiled into unique hashes (eg, container_xyz123 )
• Only the original .container → container_xyz123 mapping is exposed
• No risk of naming collisions
• Styles are still global in the DOM, but class names are unique

So this:

 .title { color: red; }

Becomes:

 .title_xyz123 { color: red; }

And $style.title returns "title_xyz123" .

? Tips & Best Practices

• Use <style module> in .vue files for co-location and simplicity
• Name your module if you have multiple style imports:

   <style module="btn">/* ... */</style>
  <style module="icon">/* ... */</style>

• Combine with pre-processors:

   <style module lang="scss">
  .container {
    .title {
      font-size: 2rem;
    }
  }
  </style>

• You can still use global styles when needed:

   :global(.global-class) {
    color: green;
  }

• Avoid @import in CSS Modules if possible — better to import in JS or Vue files

---

?? Limitations

• Can't use dynamic class names like :class="'title'" — must use $style.title
• Slightly more verbose than regular classes
• Not as intuitive for designers or new devs

But for large apps where style encapsulation matters, CSS Modules offer a robust, build-time solution.

---

Basically, just use <style module> in your Vue components, and access classes via $style . No extra config needed in modern setups like Vite or Vue CLI.

The above is the detailed content of How to use CSS Modules for scoped styling in Vue?. For more information, please follow other related articles on the PHP Chinese website!