vite配置css模块化,怎么样不让文件名为index.module.css
时间: 2023-06-25 08:05:51 浏览: 45
在 Vite 中配置 CSS 模块化可以通过在 `vite.config.js` 文件中设置 `css.modules` 属性来实现。例如,以下配置将启用 CSS 模块化并将生成的 CSS 文件名修改为 `styles.module.css`:
```javascript
// vite.config.js
export default {
css: {
modules: {
generateScopedName: '[name]__[local]___[hash:base64:5]',
// 修改生成的 CSS 文件名
localsConvention: 'camelCaseOnly',
// 只使用 camelCase 格式的类名
},
},
};
```
在上面的例子中,`generateScopedName` 属性设置了生成的类名格式,`localsConvention` 属性设置了只使用 camelCase 格式的类名。如果你希望修改生成的 CSS 文件名,可以在 `generateScopedName` 参数中使用 `[path]` 占位符,例如:
```javascript
// vite.config.js
export default {
css: {
modules: {
generateScopedName: '[path][name]__[local]___[hash:base64:5]',
// 将生成的 CSS 文件名修改为 src/components/MyComponent.styles.module.css
localsConvention: 'camelCaseOnly',
// 只使用 camelCase 格式的类名
},
},
};
```
这样,如果你的组件文件路径为 `src/components/MyComponent.vue`,那么生成的 CSS 文件名将为 `src/components/MyComponent.styles.module.css`。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)