根据class类名自动生成style样式

        我们前端开发不可避免的要和class类名和style样式打交道，有的时候我们只需要为某个dom设置一个样式，这时候我们也需要给dom添加一个class，然后在style中书写样式。

 

        现在给大家分享一个好用的webpack插件，可以根据你写的class名称,自动生成style样式,比如 font-size:16px 会自动生成.font-size:16px { font-size: 16px; }, color:red会自动生成.color:red { color: red }。这样属性名称全写出来也不是很方便，这个插件还支持属性名称简写比如 font-size:16px 还可以写成 fs:16px ，color:red 可以写成 c:red 。接下来和我一起看看插件怎么使用吧。

1. 安装

npm i style-from-class

2. 配置

2.1 在src文件夹下新建styles.css文件,并在main.js中导入

2.2 在vue.config.js中使用插件, 添加如下代码

const StyleFromClass = require('style-from-class');

configureWebpack: {
    plugins: [
        new StyleFromClass({
            fileType: ["vue"],      // 必填
            dirPath: "",            // 非必填, 默认值 ./src
            cssFilePath: "",        // 非必填, 默认值 ./src/styles.css
        })
    ],
}

参数介绍

fileType：fileType包含的文件才会通过class类名自动生成style样式

dirPath：dirPath这个文件夹下的文件才会通过class类名自动生成style样式

cssFilePath：通过class类名自动生成style样式保存在这个css文件中

3. 使用

<div class="c:red ta:center fs:red">文字</div>

到这里，就可以使用这个插件通过claas类名自动生成style样式了。自己去尝试一下吧。

4. 样式预览

        当鼠标移动到类名上是会hover展示这个类名会添加什么样式。

        4.1 首先给vscode安装一个插件 Preview Style

         

        4.2 鼠标移动到类名上

         

 

注意：

        因为有些属性名简写是一样的，这样就导致有些属性名称不能使用简写的方式。比如border和bottom，简写都是b，此时如果写了b代表了bottom。还有一些见下面的表格，红色加粗的表示简写代表的属性。

简写	属性名
a	all  animation
b	background  border  bottom
c	clear  clip  color  columns  content  cursor
d	direction  display
f	filter  flex  float  font
o	opacity  order  outline  overflow
p	padding  perspective  position
r	resize  right
t	top  transform  transition
ad	animation-delay  animation-direction  animation-duration
bc	background-clip  background-color  border-collapse  border-color
bi	background-image  border-image
br	background-repeat  border-radius  border-right
bs	background-size  border-spacing  border-style  box-shadow  box-sizing
cs	caption-side  column-span
cr	column-rule  counter-reset
ff	flex-flow  font-family
fs	flex-shrink  font-size  font-stretch  font-style
fw	flex-wrap  font-weight
ls	letter-spacing  list-style
mh	max-height  min-height
mw	max-width  min-width
ts	tab-size  text-shadow  transform-style
td	text-decoration  transition-delay  transition-duration
to	text-overflow  transform-origin
ws	white-space  word-spacing
bis	border-image-slice  border-image-source