使用unocss打包后报错

[viarotel]

[viarotel]

应该是 "*,:before,:after{--un-rotate:0;................................................"

[lisonge]

不好意思，我没有复现，可否把你的最小复现demo上传至github

[viarotel]

min-project.7z.gz

[viarotel]

min-project.7z.gz

解压前去掉".gz"

[lisonge]

把 useUnocss(), 放到 useMonkey 前面就行

import path from 'node:path'
import { defineConfig } from 'vite'
import useVue from '@vitejs/plugin-vue'
import useMonkey, { cdn, util } from 'vite-plugin-monkey'
import useEslint from 'vite-plugin-eslint'
import useUnocss from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src/'),
    },
  },
  plugins: [
    useVue(),
    useUnocss(),
    useMonkey({
      entry: 'src/main.js',
      userscript: {
        name: 'min-project',
        author: 'viarotel',
        namespace: 'viarotel/min-project',
        description: 'min-project',
        version: '0.0.1',
        icon: 'https://vitejs.dev/logo.svg',
        require: [],
      },
      build: {
        externalGlobals: {
          vue: cdn.jsdelivr('Vue', 'dist/vue.global.prod.js').concat(
            await util.fn2dataUrl(() => {
              // @ts-ignore
              // eslint-disable-next-line no-undef
              window.Vue = Vue
            }),
          ),
        },
      },
    }),
    useEslint({ fix: true }),
  ],
})

[viarotel]

把 useUnocss(), 放到 useMonkey 前面就行

import path from 'node:path'
import { defineConfig } from 'vite'
import useVue from '@vitejs/plugin-vue'
import useMonkey, { cdn, util } from 'vite-plugin-monkey'
import useEslint from 'vite-plugin-eslint'
import useUnocss from 'unocss/vite'
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src/'),
    },
  },
  plugins: [
    useVue(),
    useUnocss(),
    useMonkey({
      entry: 'src/main.js',
      userscript: {
        name: 'min-project',
        author: 'viarotel',
        namespace: 'viarotel/min-project',
        description: 'min-project',
        version: '0.0.1',
        icon: 'https://vitejs.dev/logo.svg',
        require: [],
      },
      build: {
        externalGlobals: {
          vue: cdn.jsdelivr('Vue', 'dist/vue.global.prod.js').concat(
            await util.fn2dataUrl(() => {
              // @ts-ignore
              // eslint-disable-next-line no-undef
              window.Vue = Vue
            }),
          ),
        },
      },
    }),
    useEslint({ fix: true }),
  ],
})

好的 按照这个方法确实有效 感谢大佬的指导

[lisonge]

一些补充

出现错误是因为 https://github.com/unocss/unocss/blob/b1377a98e5b443dbec2c4bda166c9c0afbc04dfb/packages/vite/src/modes/global/build.ts#L267

执行了替换操作，替换使用的正则是

https://github.com/unocss/unocss/blob/b1377a98e5b443dbec2c4bda166c9c0afbc04dfb/packages/shared-integration/src/layers.ts#L29

就把 js 代码里的 " 给替换掉了

替换之前是

("#--unocss--{layer:__ALL__}#--unocss-layer-start--__ALL__--{start:__ALL__} *,::before

替换之后是

( *,::before

[lisonge]

v2.12.1 在 css 首尾加了两个空格，现在如果还让 unocss 在本插件后面工作时替换的字符串将不会缺失引号

也在文档里加了 和其他插件一起使用时, 顺序尽量放在最后一个的说明