uno.config.ts 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. // https://www.npmjs.com/package/@uni-helper/unocss-preset-uni
  2. import { presetUni } from '@uni-helper/unocss-preset-uni'
  3. import {
  4. defineConfig,
  5. presetAttributify,
  6. presetIcons,
  7. transformerDirectives,
  8. transformerVariantGroup,
  9. } from 'unocss'
  10. export default defineConfig({
  11. presets: [
  12. presetUni({
  13. attributify: {
  14. // prefix: 'fg-', // 如果加前缀,则需要在代码里面使用 `fg-` 前缀,如:<div fg-border="1px solid #000"></div>
  15. prefixedOnly: true,
  16. },
  17. }),
  18. presetIcons({
  19. scale: 1.2,
  20. warn: true,
  21. extraProperties: {
  22. 'display': 'inline-block',
  23. 'vertical-align': 'middle',
  24. },
  25. }),
  26. // 支持css class属性化
  27. presetAttributify(),
  28. ],
  29. transformers: [
  30. // 启用指令功能:主要用于支持 @apply、@screen 和 theme() 等 CSS 指令
  31. transformerDirectives(),
  32. // 启用 () 分组功能
  33. // 支持css class组合,eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
  34. transformerVariantGroup(),
  35. ],
  36. shortcuts: [
  37. {
  38. center: 'flex justify-center items-center',
  39. },
  40. ],
  41. safelist: [],
  42. rules: [
  43. [
  44. 'p-safe',
  45. {
  46. padding:
  47. 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
  48. },
  49. ],
  50. ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
  51. ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
  52. ],
  53. theme: {
  54. colors: {
  55. /** 主题色,用法如: text-primary */
  56. primary: 'var(--wot-color-theme,#0957DE)',
  57. },
  58. fontSize: {
  59. /** 提供更小号的字体,用法如:text-2xs */
  60. '2xs': ['20rpx', '28rpx'],
  61. '3xs': ['18rpx', '26rpx'],
  62. },
  63. },
  64. })