浅谈vue3 CSS Modules的使用

CSS Modules 是一种使得 CSS 类名和动画名称只在其它模块中有效的方法，它可以帮助你避免在不同的组件之间产生样式冲突。在 Vue 3 中，你可以通过 <style module> 标签来使用 CSS Modules。

下面是一个简单的 Vue 3 组件示例，展示了如何使用 CSS Modules：




<template>
  <div :class="$style.red">
    This is a red box with CSS Modules.
  </div>
</template>
 
<script>
export default {
  // ...
}
</script>
 
<style module>
.red {
  color: red;
  border: 1px solid red;
}
</style>

在这个例子中，<div> 的 class 绑定了 $style.red，这表示它将使用由 <style module> 定义的 .red 类。通过这种方式，.red 类只会在这个组件内部有效，不会影响其他组件中可能也使用 .red 类名的样式。

浅谈vue3 CSS Modules的使用

评论已关闭

推荐阅读