在 Vite 中使用 CSS Modules 中localsConvention配置示例
时间: 2023-06-25 20:05:20 浏览: 87
在 Vite 中使用 CSS Modules,可以通过在 `sfc` 选项中的 `css` 属性里设置 `modules` 为 `true` 来启用。而 `localsConvention` 选项则是用来配置 CSS Modules 自动生成的类名的命名规则。
以下是一个在 Vite 中使用 CSS Modules 和 `localsConvention` 配置的示例:
```html
<template>
<div :class="$style.wrapper">
<h1 :class="$style.title">Hello, world!</h1>
<p :class="$style.text">Lorem ipsum dolor sit amet.</p>
</div>
</template>
<script>
export default {
name: 'MyComponent',
}
</script>
<style scoped module localsConvention="camelCase">
.wrapper {
background-color: #f9f9f9;
padding: 20px;
}
.title {
font-size: 24px;
color: #333;
}
.text {
font-size: 16px;
color: #666;
}
</style>
```
在上面的示例中,`localsConvention` 被设置为 `camelCase`,因此 CSS Modules 会将所有的类名转换为驼峰式命名。例如,`.wrapper` 类名会被转换为 `$style.wrapper`,`.title` 类名会被转换为 `$style.title`,以此类推。这样,我们在组件中使用类名时,就可以直接使用 `$style` 对象来引用 CSS Modules 自动生成的类名了。