css modules
时间: 2023-08-19 18:18:06 浏览: 60
CSS Modules是一种解决CSS模块化难题的技术。它通过在CSS文件名中使用Block名来对应,只需要考虑Element和Modifier。在CSS Modules中,可以使用类似BEM的命名方式来定义样式,例如`.ConfirmButton--disabled`。[1]
要使用CSS Modules,需要在webpack配置中使用css-loader或者scss-loader,并将modules选项设置为true。可以通过设置localIdentName来定义生成的类名的格式。[2]
CSS Modules可以很好地解决CSS模块化的问题,并且可以与Sass/Less/PostCSS等配合使用,充分利用现有的技术积累。它还可以与全局样式灵活搭配,便于逐步迁移项目到CSS Modules。CSS Modules的实现也很轻量级,未来有标准解决方案后可以低成本迁移。如果你的项目中遇到了类似的问题,那么使用CSS Modules是非常值得一试的。[3]
相关问题
vite的css modules的globalModulePaths的简单示例
在 Vite 中使用 CSS Modules 的时候,可以通过 `globalModulePaths` 来指定全局的 CSS 文件,这些文件不会被 CSS Modules 处理,而是直接注入到 HTML 文件中。这个功能可以用来引入一些全局的 CSS 样式或者第三方库的样式。
下面是一个简单的示例:
```javascript
// vite.config.js
export default {
plugins: [vue()],
css: {
modules: {
// 将所有以 global. 开头的 CSS 文件视为全局文件
globalModulePaths: [/^global\./]
}
}
}
```
在项目中,我们可以有以下几个 CSS 文件:
```css
/* global.style.css */
body {
background-color: #f2f2f2;
}
/* global.icon.css */
.icon {
display: inline-block;
width: 20px;
height: 20px;
}
```
```css
/* app.style.css */
.container {
max-width: 1200px;
margin: 0 auto;
}
.title {
font-size: 24px;
font-weight: bold;
}
/* 普通的 CSS 文件,会被 CSS Modules 处理 */
.button {
color: red;
}
```
在 Vue 组件中,我们可以这样使用这些 CSS 文件:
```html
<template>
<div class="container">
<h1 class="title">Hello World</h1>
<button class="button">Click me</button>
<i class="icon"></i>
</div>
</template>
<script>
import './app.style.css'
import './global.style.css'
import './global.icon.css'
export default {
name: 'App'
}
</script>
```
在 HTML 文件中,会输出以下内容:
```html
<head>
<style>
/* global.style.css */
body {
background-color: #f2f2f2;
}
/* global.icon.css */
.icon {
display: inline-block;
width: 20px;
height: 20px;
}
/* app.style.css */
.container {
max-width: 1200px;
margin: 0 auto;
}
.title {
font-size: 24px;
font-weight: bold;
}
/* 普通的 CSS 文件,会被 CSS Modules 处理 */
.button {
color: red;
}
</style>
</head>
```
在 Vite 中使用 CSS Modules 中localsConvention配置示例
在 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 自动生成的类名了。