uno.config.ts 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  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. // 添加此配置避免重复扫描
  12. content: {
  13. pipeline: {
  14. exclude: [
  15. 'node_modules',
  16. '.git',
  17. 'dist',
  18. '**/*.d.ts',
  19. '__uno.css', // 🚨 排除警告中的问题文件
  20. ],
  21. },
  22. },
  23. // 添加此配置
  24. include: [
  25. './src/**/*.{vue,js,ts,jsx,tsx}',
  26. './src/style/uno.scss', // 指定新入口
  27. ],
  28. presets: [
  29. presetUni({
  30. attributify: {
  31. // prefix: 'fg-', // 如果加前缀,则需要在代码里面使用 `fg-` 前缀,如:<div fg-border="1px solid #000"></div>
  32. prefixedOnly: true,
  33. },
  34. }),
  35. presetIcons({
  36. scale: 1.2,
  37. warn: true,
  38. extraProperties: {
  39. 'display': 'inline-block',
  40. 'vertical-align': 'middle',
  41. },
  42. }),
  43. // 支持css class属性化
  44. presetAttributify(),
  45. ],
  46. transformers: [
  47. // 启用指令功能:主要用于支持 @apply、@screen 和 theme() 等 CSS 指令
  48. transformerDirectives(),
  49. // 启用 () 分组功能
  50. // 支持css class组合,eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
  51. transformerVariantGroup(),
  52. ],
  53. shortcuts: [
  54. {
  55. center: 'flex justify-center items-center',
  56. },
  57. ],
  58. // 动态图标需要在这里配置,或者写在vue页面中注释掉
  59. safelist: ['i-carbon-code'],
  60. rules: [
  61. [
  62. 'p-safe',
  63. {
  64. padding:
  65. 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
  66. },
  67. ],
  68. ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
  69. ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
  70. ],
  71. theme: {
  72. colors: {
  73. /** 主题色,用法如: text-primary */
  74. primary: 'var(--wot-color-theme,#0957DE)',
  75. },
  76. fontSize: {
  77. /** 提供更小号的字体,用法如:text-2xs */
  78. '2xs': ['20rpx', '28rpx'],
  79. '3xs': ['18rpx', '26rpx'],
  80. },
  81. },
  82. })