如何实现自定义修改组件样式前缀功能

  • Z时代
  • 2024-02-26
  • 分类：IT

如何实现自定义修改组件样式前缀功能

公司之前自己写了一个 vue 组件库，然后现在有一个需求，想要自定义修改组件样式前缀。然后我参考了 ant design 和 vant 组件库，他们的实现方式差不多：

  1. 组件：通过一个 <ConfigProvider> 组件设置前缀名，然后在组件中根据设定的前缀名和组件名称动态生成样式名
  2. scss：提取一个变量 $prefix，然后所有样式的类名都是通过 #{selector.append($prefix-button, "button")} 这样的方式得到

结果我们的技术主管认为组件部分的调整太麻烦了，不想一个组件一个组件去改，想要一个更好的方案。

经过搜索，我看到一个 react-classname-prefix-loader 包，使用方式组件过它编译之后会自动加上设定的前缀。但就和它的名字一样，它只支持 react，也没有其他类似的方案。

但我确实觉得这是一个方向，想问下各位大佬有没有针对自定义修改组件样式前缀的实现方案，求教了

通过 loader 并不是一个好方案，我后面想想，如果采用了 loader 这样的方案，每次要调整前缀名，就想要从源码那边重新编译打包，用起来很麻烦！！！

回答：

感谢各位大佬的回复，目前我并没有找到简单轻松的方式，还是要一个一个去修改组件对应样式文件，并通过统一的变量定义前缀，实例代码如下：

// 声明变量
$css-prefix: 'xxx';
// 使用变量
.#{$--css-prefix}-button {}

以上是 如何实现自定义修改组件样式前缀功能 的全部内容， 来源链接： utcz.com/p/935495.html

回到顶部