Using CSS Modules in Vue projects can effectively avoid style conflicts and implement modular styles. Its core is to automatically generate unique identifiers for class names to ensure local scope. 1. Enable CSS Modules in a single file component by adding module attribute to the

Using CSS Modules in Vue projects can effectively avoid style conflicts and make the style of components truly "modular". Its core idea is to automatically generate unique identifiers for class names, thereby achieving local scope. It does not require global introduction or worry about duplication of naming, which is very suitable for large projects.

Basic ways to enable CSS Modules

Using CSS Modules in Vue Single File Component (SFC) is simple, you just need to add module attribute to the <style></style> tag:

 <style module>
.red {
  color: red;
}
</style>

After writing this way, the .red class name will be automatically renamed to a format similar to .red_1va3x_1 to ensure that it does not conflict with the same name class in other components.

Then you can refer to these class names by $style in the template:

 <template>
  <p :class="$style.red">This paragraph is red</p>
</template>

This approach works for most Vue projects built on Webpack or Vite and is already supported by default.

Benefits and applicable scenarios of using CSS Modules

The biggest advantage of CSS Modules is the local scope of automation , which is particularly useful in the following situations:

• Avoid class name conflicts when developing in collaboration with multiple people
• In component library or reusable components, ensure style isolation
• Want to keep the class name concise but don't want to pollute the global namespace

Compared with Scoped style, CSS Modules manages class name binding more "explicitly" and is easier to use with JavaScript, such as dynamically splicing class names or making conditional judgments.

Common precautions and tips

Although CSS Modules are easy to use, there are some details that need to be paid attention to:

• The class name must be referenced through $style : the string class name cannot be written directly, otherwise the corresponding style will not be found.

• It is recommended to use camel nomenclature : for example .myClass will become myClass in $style , which is more intuitive than - .

• Multiple class names are used in combination : can be passed to class attributes in arrays or objects:

   <p :class="[$style.red, $style.bold]">Red bold text</p>

• If global style is indeed needed : you can use :global() to wrap the class name:

   :global(.global-red) {
    color: red;
  }

  This way the class names written will not be automatically renamed.

  If you are using Vue TypeScript, you can also support type derivation well under the premise of correct configuration, further improving the development experience.

  Basically that's it. It is not complicated to use, but it can bring a lot of convenience when collaborating teams and encapsulating components.

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