generator-metaclass-webpack-plugin v1.0.2

generator-metaclass-webpack-plugin

这是一个基于 webpack 的生成原子式 css class 工具

目前测试在 vue2、vue3 基于webpack项目中工作正常

使用

1. npm i generator-metaclass-webpack-plugin -D

2. 在 vue.config.js 中配置

const generatorMetaClassPlugin = require('generator-metaclass-webpack-plugin');

module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.vue$/i,
                    use: [generatorMetaClassPlugin.loader]
                }
            ]
        },
        plugins: [
            new generatorMetaClassPlugin()
        ]
      }
}

在 .vue 文件中使用

只需要书写符合规则的 class，就会自动生成 generator.css，插入 html 的 head 中

例如：

<template>
    <h1 class="margin_10-15-20-25 color_#f40"></h1>
</template>

在生成的 generator.css 中内容：

.margin_10_15_20_25{
    margin: 10px 15px 20px 25px;
}
.color_0xf40{
    color: #f40;
}

规则

属性名称

1. 所有的单个单词的属性都可以直接单词，其中有些可以简写 例如：

2. 双单词属性几乎可以使用第一个单词首字母+后一个完整单词的形式来书写，但有六个是特殊的：max-height、max-width、min-height、min-width、background-color、background-image 例如：

3. 多单词属性，都可以使用单词首字母进行简写 例如：

属性值

1. 数字结尾，默认添加px作为单位
   • 如：w_100 得到 .w_100{width: 100px}
2. 不需要添加单位，请使用 n 作为结尾
   • 如：flex_1n 得到 .flex_1{flex: 1}
3. 如果你想以 % 作为单位，请以 p 作为结尾
   • 如：h_10p 得到 .h_10p{height: 10%}
4. 暂不支持 calc()、rgb()、rgba()、url() 等css函数，后续可能会考虑支持