vite的css modules的globalModulePaths的简单示例
时间: 2023-06-25 13:05:39 浏览: 49
在 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>
```