taro+react引用unocss.css报错

[Soumns777]

我在taro+react的项目引入了unocss、unocss-preset-weapp，并配置了unocss.config.js配置,但是在app.js里面引入uno.css的时候报错,提示resolve 'uno.css'报错,这个是我的unocss.config.js配置文件,麻烦有时间看下呢

// eslint-disable-next-line import/no-named-as-default
import presetWeapp from 'unocss-preset-weapp'
import {defaultAttributes, extractorAttributify, transformerClass} from 'unocss-preset-weapp/transformer'
import {defineConfig} from "unocss";
// 增加自定义属性b 书写border属性
const {presetWeappAttributify, transformerAttributify} = extractorAttributify({
  attributes: [...defaultAttributes, 'b'],
})
export default defineConfig({
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp({
      // whRpx: false,
      isH5: process.env.TARO_ENV === 'h5',
      platform: 'taro'
    }),
    // attributify autocomplete
    presetWeappAttributify(),
  ],
  theme: {
    width: {
      all: '100%',
    },
    height: {
      all: '100%',
    },
    colors: {
      base: '#fff', // 白色
      goRepay: '#087FFF',
      spxq: 'linear-gradient(NaNdeg, #6298FF 0%, #A8D5FF 0%)',
    },
    boxShadow: {
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
      'goods': '0 3px 8px rgba(0, 0, 0, .15)',
    },
    borderRadius: {
      'pgxl': '0 0 25rpx 25rpx',
      'spxq': '3rpx',
    },
    lineHeight: {
      address: '29rpx',
      number: '5rpx'
    },
  },
  rules: [
    [/^m-(\d*)$/, ([, d]) => ({margin: `${d}`})],
    [/^p-(\d*)$/, ([, d]) => ({padding: `${d}rpx`})],
    [/^mx-(\d*)$/, ([, d]) => ({margin: `0 ${d}rpx 0 ${d}rpx`})],
    [/^my-(\d*)$/, ([, d]) => ({margin: `${d}rpx 0 ${d}rpx 0`})],
    [/^px-(\d*)$/, ([, d]) => ({padding: `0 ${d}rpx 0 ${d}rpx`})],
    [/^py-(\d*)$/, ([, d]) => ({padding: `${d}rpx 0 ${d}rpx 0`})],

    // 设置margin-top不会自动 10rpx -> 80rpx
    [/^m(t|b|l|r*)-(\d*)$/, ([, t, d]) => {
      const map = {
        t: 'top',
        b: 'bottom',
        l: 'left',
        r: 'right',
      }
      return ({[t ? `margin-${map[t]}` : 'margin']: `${d}rpx`})
    }],
    // 设置margin-top不会自动 10rpx -> 80rpx
    [/^p(t|b|l|r*)-(\d*)$/, ([, t, d]) => {
      const map = {
        t: 'top',
        b: 'bottom',
        l: 'left',
        r: 'right',
      }
      return ({[t ? `padding-${map[t]}` : 'padding']: `${d}rpx`})
    }],
  ],
  shortcuts: [
    // position
    ['pr', 'relative'],
    ['pa', 'absolute'],
    ['pf', 'fixed'],
    ['ps', 'sticky'],
    // display:flex;align-items:center
    [
      'f-1',
      'flex-1'
    ],
    // display:flex;align-items:center
    [
      'f-c',
      'flex items-center'
    ],
    // flex-direction: column;
    [
      'f-col',
      'flex-col flex'
    ],
    // flex-wrap: wrap
    [
      'f-w',
      'flex-wrap flex'
    ],
    // min-w min-h
    [
      'min-w-h',
      'min-w-screen min-h-screen'
    ],
    // justify-content: space-between
    [
      'j-c-b',
      'justify-between'
    ],
    // justify-content: space-around
    [
      'j-c-a',
      'justify-around'
    ],
    // justify-content: space-center
    [
      'j-c-c',
      'justify-center'
    ],
    // 背景图全覆盖
    [
      'bg-w-h',
      'bg-cover bg-no-repeat'
    ],
    // flex动态样式布局
    [
      /^f-((c|s|e)(-(c|s|e|b|a))*)$/,
      ([, , g1, , g2]) => {
        let style = ``;
        const temps = [
          {k: "c", v: "center"},
          {k: "s", v: "start"},
          {k: "e", v: "end"},
          {k: "b", v: "between"},
          {k: "a", v: "around"}
        ];

        const r1 = temps.find(i => i.k == g1);
        style = `flex items-${r1?.v || "center"} content-${r1?.v || "center"}`;

        if (g2) {
          const r2 = temps.find(i => i.k == g2);
          style += ` justify-${r2?.v || "center"}`;
        }

        return style;
      }
    ]
  ],
  transformers: [
    transformerAttributify(),
    transformerClass(),
  ]
})

[Soumns777]

在app.js里面就通过 import 'uno.css' 引入了unocss,提示

[MellowCo]

#16

[MellowCo]

taro 依赖很乱的

[Soumns777]

我重新装了一遍依赖,然后也试了给 package.json的unocss-preset-weapp 的版本弄成 link:../../ ,重新装了一遍依赖还是提示上面那个报错哎

[MellowCo]

NervJS/taro#12869

[Soumns777]

我删除了node_modules,然后给enhanced-resolve锁定在5.10.0版本不行,然后删掉升级到最新版本也不行

[Soumns777]

你可以就直接拉取个taro+react的模板然后引入unocss试试呢?应该import 'uno.css'的时候就会报错

[Soumns777]

然后我以为是模板的问题,然后我重新拉了gitee一份,那个package.json里面也没有enhanced-resolve这个包,但是还是报错提示没有找到uno.css

[MellowCo]

没问题