@zhangliuge/class-to-css-loader v4.0.1

class-to-css-loader

该loader基于css的简化命名法：

当你在 vue/react 文件中写有<div class="ml:10 fs:12 p:a" />hello<div>时，这个div将自动获得：

margin-left: 10px;
font-size: 12px;
position: absolute;

的样式！

工作原理

假设你有如下vue文件代码：

// xxx.vue
  <div class="ml:10 fs:12 p:a" />hello<div>

经过该 loader 转换后，将生成如下代码：

<div class="ml_s_10 fs_s_12 p_s_a">你好世界</div>
<style>
.ml_s_10 { margin-left: 10px; }
.fs_s_12 { font-size: 12px; }
.p_s_a { position: absolute; }
</style>

冒号会自动转换成_s_，因为css属性名不支持冒号。

使用方式

1、在 webpack.config 里进行配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'class-to-css-loader',
            options: {
              unit: 'px', // 使用的单位，rem 或 px, 默认 px。
            }
          }
        ],
      },
    ]
  },
}

解析对照表