可根据类名快速生成样式代码的vite-vue插件
npm install vite-plugin-vue-ecsssh
npm install vite-plugin-vue-ecss
`
Usage in Vite
`js
import vitePluginVueEcss from "vite-plugin-vue-ecss";
export default {
plugins: [
vitePluginVueEcss({
/ config /
}),
],
};
`
Configuration
`js
vitePluginVueEcss({
/**
* The output style file name. Default 'ecss.css' ， choosable => 'css' | 'less' | 'scss' | 'sass'
/
fileName: string,
/**
* The class name matches the prefix. Default 'ecss'
/
prefix: string,
/**
* The output path of the style file. Default './' + fileName .
* Note: When this value is set, the values of fileName are reassigned with the corresponding string from the path.
* The plug-in creates a file based on the path, and you can import the file into your project
/
outputPath: string
}),
`
Then you need to reference the created style file in your project
Rules written for class names
$3
class edit
`html
`
The resulting style file is as follows
`css
.ecss--w__100px--h__100px {
width: 100px !important;
height: 100px !important;
}
.ecss--mg__20px__10px {
margin: 20px 10px !important;
}
`
Tips：When you need to set a color, the color value in your class name does not need to be written with a # sign, for example:
`html
`
The resulting style file is as follows
`css
.ecss--ft_s__20px--color__blue {
font-size: 20px !important;
color: blue !important;
}
.ecss--bgc__ff0000 {
background-color: #ff0000 !important;
}
``