这是一个可根据类名快速自动生成样式代码的插件
npm install vue-plugin-ecsssh
npm install vue-plugin-ecss
`
Usage in Vite
`js
import { vitePluginVueEcss } from "vue-plugin-ecss";
export default {
plugins: [
vitePluginVueEcss({
/ config /
}),
],
};
`
Usage in Webpack
`js
const { WebpackPluginVueEcss } = require("vue-plugin-ecss");
module.exports = defineConfig({
configureWebpack: {
plugins: [new WebpackPluginVueEcss()],
},
});
`
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;
}
``