Prefix样式前缀
AXUI的css样式是使用"_"前缀作为命名空间的,他应该为私有或独有的特殊字符,用户不应该再使用该字符来写css样式;该前缀可通过powershell文件批量修改,修改之后重新打包即可。
前言
为了避免全局污染,AXUI的css样式类和css变量使用_
短下划线作为命名空间,所以你会看到AXUI的css文件会有注入以下命名方式:
._alert{}
--_alert-w:40rem;
使用_
短下划线开头表示该样式私有,专属于AXUI,用户不能再拿该前缀定义样式类。如果用户的项目与AXUI深度融合了,希望保持统一的代码风格,则可以将_
替换成用户的专属前缀,除了-
和_
两个css文件允许的特殊字符外,可以是其他英文字母或其他特殊字符。
需要注意的是,在css文件中,唯二合法的特殊字符是-
和_
,如果需要使用其他特殊字符则需要进行转义处理,举例说明如下:
//在css中"+"的转义方法是:"+"
<style>
.+btn{}
</style>
<span class="+btn"></span>
批量替换前缀
AXUI所有的样式源文件放在src/styles
目录下,里面有less和相应的css文件;在src目录有个文件为replaceCssPrefix.ps1
,该文件是powershell文件,用来批量替换scr/styles
目录下的css前缀,该文件使用方法是:右键=>使用powershell运行,按提示进行操作即可替换css前缀。
- 输入Y执行策略
- 输入被修改的样式前缀,如果默认是
_
,可以直接按下回车键到下一步 - 输入将要使用的前缀(特殊字符需要转义),按下回车键到下一步
- 对比确认是否需要替换前缀,确认则输入Y,并按下回车键
- 替换完成
- 打包css文件(npm run build)