uno.config.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import { defineConfig } from 'unocss';
  2. import presetUno from '@unocss/preset-uno';
  3. import transformerDirectives from '@unocss/transformer-directives';
  4. const directions = ['m', 'ml', 'mr', 'mt', 'mb', 'p', 'pl', 'pr', 'pt', 'pb'];
  5. const properties = [
  6. 'margin',
  7. 'margin-left',
  8. 'margin-right',
  9. 'margin-top',
  10. 'margin-bottom',
  11. 'padding',
  12. 'padding-left',
  13. 'padding-right',
  14. 'padding-top',
  15. 'padding-bottom',
  16. ];
  17. const pmRules = directions.map((direction, index) => {
  18. const regex = new RegExp(`^${direction}-(\\d+)$`);
  19. return [regex, ([, d]) => ({ [properties[index]]: `${parseInt(d)}rpx` })];
  20. });
  21. export default defineConfig({
  22. important: true,
  23. presets: [
  24. presetUno({
  25. dark: 'class',
  26. important: true,
  27. // 排除加载页面的样式,避免冲突
  28. preflight: false,
  29. }),
  30. ],
  31. transformers: [transformerDirectives()],
  32. // 排除加载页面相关的选择器
  33. blocklist: ['preload', 'container', 'box', 'logo', 'name', 'title'],
  34. shortcuts: [
  35. {
  36. /*** flex布局 ****/
  37. 'wh-full': 'w-full h-full',
  38. 'flex-center': 'flex justify-center items-center',
  39. 'flex-between-center': 'flex justify-between items-center',
  40. 'flex-between-baseline': 'flex justify-between items-baseline',
  41. 'flex-around-center': 'flex items-center justify-around',
  42. 'flex-col-center': 'flex-center flex-col',
  43. 'flex-x-center': 'flex justify-center',
  44. 'flex-y-center': 'flex items-center',
  45. 'i-flex-center': 'inline-flex justify-center items-center',
  46. 'i-flex-x-center': 'inline-flex justify-center',
  47. 'i-flex-y-center': 'inline-flex items-center',
  48. 'flex-col': 'flex flex-col',
  49. 'flex-col-stretch': 'flex-col items-stretch',
  50. 'i-flex-col': 'inline-flex flex-col',
  51. 'i-flex-col-stretch': 'i-flex-col items-stretch',
  52. 'flex-1-hidden': 'flex-1 overflow-hidden',
  53. /***** grid布局 *****/
  54. 'grid-column-2': 'grid grid-cols-2 grid-rows-none',
  55. 'grid-column-3': 'grid grid-cols-3 grid-rows-none',
  56. 'grid-column-4': 'grid grid-cols-4 grid-rows-none',
  57. 'grid-column-5': 'grid grid-cols-5 grid-rows-none',
  58. /**** 定位 ****/
  59. 'absolute-lt': 'absolute left-0 top-0',
  60. 'absolute-lb': 'absolute left-0 bottom-0',
  61. 'absolute-rt': 'absolute right-0 top-0',
  62. 'absolute-rb': 'absolute right-0 bottom-0',
  63. 'absolute-tl': 'absolute-lt',
  64. 'absolute-tr': 'absolute-rt',
  65. 'absolute-bl': 'absolute-lb',
  66. 'absolute-br': 'absolute-rb',
  67. 'absolute-center': 'absolute-lt flex-center wh-full',
  68. 'abs-lt': 'absolute left-0 top-0',
  69. 'abs-lb': 'absolute left-0 bottom-0',
  70. 'abs-rt': 'absolute right-0 top-0',
  71. 'abs-rb': 'absolute right-0 bottom-0',
  72. 'abs-center': 'absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2',
  73. 'abs-x-center': 'absolute left-1/2 transform -translate-x-1/2',
  74. 'abs-y-center': 'absolute top-1/2 transform -translate-y-1/2',
  75. /*** 固定定位 ****/
  76. 'fixed-lt': 'fixed left-0 top-0',
  77. 'fixed-lb': 'fixed left-0 bottom-0',
  78. 'fixed-rt': 'fixed right-0 top-0',
  79. 'fixed-rb': 'fixed right-0 bottom-0',
  80. 'fixed-tl': 'fixed-lt',
  81. 'fixed-tr': 'fixed-rt',
  82. 'fixed-bl': 'fixed-lb',
  83. 'fixed-br': 'fixed-rb',
  84. 'fixed-center': 'fixed-lt flex-center wh-full',
  85. /**** 文本 ****/
  86. 'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
  87. 'ellipsis-text': 'nowrap-hidden text-ellipsis',
  88. /**** 过渡动画 ****/
  89. 'transition-base': 'transition-all duration-300 ease-in-out',
  90. /**** 边框 ****/
  91. 'border-d': 'b b-solid b-#ddd',
  92. 'base-border': 'b b-solid b-light',
  93. 'base-border-b': 'b-b b-b-solid b-b-light',
  94. /**** 其他 ****/
  95. pointer: 'cursor-pointer',
  96. /****** 渐变色 ******/
  97. 'primary-gradient': 'bg-gradient-to-br from-gradient-start to-gradient-end',
  98. /**** 基础背景图 *****/
  99. 'base-bg-img': 'bg-cover bg-no-repeat',
  100. },
  101. ],
  102. rules: [
  103. ...pmRules,
  104. [/^mx-(\d+)$/, ([, d]) => ({ margin: `0 ${parseInt(d)}px` })],
  105. [/^my-(\d+)$/, ([, d]) => ({ margin: `${parseInt(d)}px 0` })],
  106. [/^px-(\d+)$/, ([, d]) => ({ padding: `0 ${parseInt(d)}px` })],
  107. [/^py-(\d+)$/, ([, d]) => ({ padding: `${parseInt(d)}px 0` })],
  108. [/^fs-(\d+)$/, ([, d]) => ({ 'font-size': `${parseInt(d)}px` })],
  109. ],
  110. theme: {
  111. colors: {
  112. primary: '#1890FF',
  113. light: '#ffffff',
  114. dark: '#18181c',
  115. 'gradient-start': '#1890FF',
  116. 'gradient-end': '#096dd9',
  117. },
  118. },
  119. });