zephyrandmoon / vite-plugin-css-modules

vitejs css modules 名称自动转化插件

@zebing/vite-plugin-css-modules

@zebing/vite-plugin-css-modules 是一个vue css modules智能转化插件。让你在使用vue css modules的同时，无需通过:class="$style.cssname", class={styles.cssname}等繁琐的方式调用，而是直接 class="cssname", class="cssname"简单调用，极大的减小工作量，增加开发效率。

本插件仅适用 vue3.0+。

如何使用?

安装

npm install @zebing/vite-plugin-css-modules --save-dev

使用

在vite.config.js 配置文件中加入配置

import vitePluginCssModules from '@zebing/vite-plugin-css-modules'
export default {
  plugins: [
    vitePluginCssModules()
  ]
}

options

Options

Name	Type	Description	Default
cssFile	array	css文件类型，不满足为文件将被过滤	['css', 'scss', 'less']
styleName	string	class名称，插件会寻找该名称自动进行转换	class
autoImport	boolean	自动引入同级目录中的style.module.[css|scss|less]文件	false

代码中使用

通过 import 引入 css文件，务必在路径中保留文件名后缀， 如 import './styles.module.css'

jsx写法

import './styles.module.css';

export default {
  return (
    <div class="classname"> hello world</div>
  );
}

将会自动转换成

import styles from './styles.module.css';

export default {
  return (
    <div class={styles.classname}> hello world</div>
  );
}

template写法

<template>
  <div class="classname"> hello world</div>
</template>
<script>
import './styles.module.css';
</script>
<style module>
...
<style>

将会自动转换成

// 注，此处便于理解，实际已转化成js代码，而非template模板
<template>
  <div :class="$style.classname"> hello world</div>
</template>
<script>
import './styles.module.css';

export default {

}
</script>
<style module>
...
<style>

styleName跟class共存

以template方式为例

<div class="test" classname="test1"> hello world</div>
<div :class="['test']" classname="test1"> hello world</div>
<div :class="{test:true}" classname="test1"> hello world</div>
<div :class="'test'" classname="test1"> hello world</div>

将会自动转换成

<div class="test test1_module"> hello world</div>
<div :class="['test', test1_module]"> hello world</div>
<div :class="{test:true, [test1_module]:true}"> hello world</div>
<div class="test test1_module"> hello world</div>

FAQ

• templte方式可以通过import引入css吗？

  可以。templte通过<style></style>或直接import都可以。两者都可以共存。

• 如果class="classname"在css中并不存在会被转化吗？

  不会。在运行中如果没找到相应的css modules名称，插件将会保留原来的类名classname