V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
wukongkong
V2EX  ›  CSS

unocss 如何修改默认 8 的倍数

  •  
  •   wukongkong · 216 天前 · 1183 次点击
    这是一个创建于 216 天前的主题,其中的信息可能已经有所发展或是发生改变。

    unocss 用起来还是挺方便的,但是这个倍数有点大( 8 16 32 ),希望可以调整成 4 倍( 4 8 12 16 ),和 tailwindcss 一样。 找了半天,没找到在哪里修改,有没有一个地方修改,所有的地方(间距,字体等),都生效的办法。

    2 条回复
    wukongkong
        1
    wukongkong  
    OP
       216 天前
    现在的配置这样

    ```JavaScript
    // uno.config.ts
    import {
    Preset,
    defineConfig,
    presetAttributify,
    presetIcons,
    transformerDirectives,
    transformerVariantGroup,
    } from 'unocss'

    import {
    presetApplet,
    presetRemRpx,
    transformerApplet,
    transformerAttributify,
    } from 'unocss-applet'

    const isH5 = process.env?.UNI_PLATFORM === 'h5'
    const isMp = process.env?.UNI_PLATFORM?.startsWith('mp') ?? false

    const presets: Preset[] = []
    if (!isMp) {
    /**
    * you can add `presetAttributify()` here to enable unocss attributify mode prompt
    * although preset is not working for applet, but will generate useless css
    * 为了不生产无用的 css,要过滤掉 applet
    */
    // 支持 css class 属性化,eg: `<button bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600" text="sm white">attributify Button</button>`
    presets.push(presetAttributify())
    }
    if (!isH5) {
    presets.push(presetRemRpx())
    }
    export default defineConfig({
    presets: [
    presetApplet({ enable: !isH5 }),
    ...presets,
    // 支持图标,需要搭配图标库,eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`
    presetIcons({
    scale: 1.2,
    warn: true,
    extraProperties: {
    display: 'inline-block',
    'vertical-align': 'middle',
    },
    }),
    ],
    theme: {},

    /**
    * 自定义快捷语句
    * @see https://github.com/unocss/unocss#shortcuts
    */
    shortcuts: [['center', 'flex justify-center items-center']],
    transformers: [
    // 启用 @apply 功能
    transformerDirectives(),
    // 启用 () 分组功能
    // 支持 css class 组合,eg: `<div class="hover:(bg-gray-400 font-medium) font-(light mono)">测试 unocss</div>`
    transformerVariantGroup(),
    // Don't change the following order
    transformerAttributify({
    // 解决与第三方框架样式冲突问题
    prefixedOnly: true,
    prefix: 'fg',
    }),
    transformerApplet(),
    ],
    rules: [
    [
    'p-safe',
    {
    padding:
    'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
    },
    ],
    ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
    ],
    })

    /**
    * 最终这一套组合下来会得到:
    * mp 里面:mt-4 => margin-top: 32rpx
    * h5 里面:mt-4 => margin-top: 1rem
    */
    ```
    wukongkong
        2
    wukongkong  
    OP
       216 天前
    已解决,默认 375 宽度,这里 presetRemRpx 需要改一下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5256 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 05:44 · PVG 13:44 · LAX 21:44 · JFK 00:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.