https://github.com/ProgrameBoy/vite-plugin-setting-css-module

The vite plugin is used for css-modules
https://github.com/ProgrameBoy/vite-plugin-setting-css-module

Last synced: 2 months ago
JSON representation

The vite plugin is used for css-modules

• Host: GitHub
• URL: https://github.com/ProgrameBoy/vite-plugin-setting-css-module
• Owner: ProgrameBoy
• Created: 2022-10-12T07:34:48.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-15T09:54:26.000Z (8 months ago)
• Last Synced: 2024-03-25T13:55:20.476Z (3 months ago)
• Language: TypeScript
• Size: 167 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.ch.md

Lists

• awesome-vite - vite-plugin-setting-css-module - Implementing CSS-Modules with vite modularity rules. Don't need create `xxx.module.css`. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-setting-css-module - Implementing CSS-Modules with vite modularity rules. Don't need create `xxx.module.css`. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-setting-css-module - Implementing CSS-Modules with vite modularity rules. Don't need create `xxx.module.css`. (Plugins / Framework-agnostic Plugins)
• awesome-viter - vite-plugin-setting-css-module - Implementing CSS-Modules with vite modularity rules. Don't need create `xxx.module.css`. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-setting-css-module - Implementing CSS-Modules with vite modularity rules. Don't need create `xxx.module.css`. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-setting-css-module - Implementing CSS-Modules with vite modularity rules. Don't need create `xxx.module.css`. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-setting-css-module - Implementing CSS-Modules with vite modularity rules. Don't need create `xxx.module.css`. (Plugins / Framework-agnostic Plugins)

README

        
# vite-plugin-setting-css-module

## 简介

-------

实现vite项目css模块化

## 原由

-------

vite + react中要实现css模块化需要创建css文件为 *.module.css的文件名vite才能进行样式模块化的处理。

如果是新建项目是可以按照vite规定的命名规范去创建css文件，但是如果是项目迁移到vite这样会造成很大的阻碍，

大部老项目css文件命名不是按照vite模块化命名规范去命名的，所以该插件就是去处理不按照vite规定的命名规范去实现css模块化。

## 使用方法

-------

```

npm i vite-plugin-setting-css-module -D

```

```typescript

import { defineConfig } from 'vite'

import vitePluginSettingCssModule from 'vite-plugin-setting-css-module';

// https://vitejs.dev/config/

export default defineConfig({

  ...

  plugins: [

    vitePluginSettingCssModule()

  ]

  ...

})

```

## 参数

- `include`(RegExp|Function) - 自定义模块化的文件。  

例：`/*.scss/` 或 `function (fileName) { return fileName.endsWith('scss') }`

- `exclude`(RegExp|Function) - 自定义排除模块化的css文件。  

例：`/*.global.scss/` 或 `function (fileName) { return fileName.includes('.global.scss') }`

```typescript

// 或者也可以在引用时添加模块化标记， 例如：在index.js文件中

import style from './style.scss?global'

```