components目录下其他文件夹的组件引入失效

[ottocsb]

信息

nodejs 版本

18.12

包管理器及其版本

pnpm

bug

描述

components目录下其他文件夹的组件引入失效，个人项目使用此模板搭建，刚刚pull了一下，发现原来生效的突然失效了，把此项目最新代码拉下来发现也是失效的

预期结果

正常引用组件

最小测试仓库

此仓库

[markthree]

@ottocsb 靓仔你好，我在最近规范了多层级组件。

如果你是旧项目。可以在 presets/index.ts 里把 directoryAsNamespace 改为 false。

后边我会在文档中加以说明

[ottocsb]

感谢回复，按照你的方法，没有引用icones图标的页面可以加载了，个人项目部分页面引用icones的图标加载失败，我在此项目内也做了尝试，也是加载失败，网页会无法进入， 如下图

[markthree]

@ottocsb 靓仔你好，图标组件目前测试已经失效，后边会改为 unocss 图标方案 👉 Icons preset

[markthree]

你可以暂时把下边这段代码粘贴到项目根目录的 unocss.config.ts 中，后边我会同步该功能以及文档

import {
	defineConfig,
	presetAttributify,
	presetTypography,
	presetUno,
	presetIcons,
} from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'

export default defineConfig({
	transformers: [transformerDirectives()],
	presets: [
		presetAttributify(),
		presetIcons({
			autoInstall: true,
		}),
		presetUno(),
		presetTypography(),
	],
})

然后把 <i-ep:arrow-left-bold /> 改为 <div class="i-ep:arrow-left-bold"> </div> 以此类推，像用 class 一样用它们

[markthree]

@ottocsb 靓仔你好，图标使用方式已更新，具体可见 👉 dishait/tov-template#8-%E5%

[markthree]

@ottocsb 关于嵌套组件的用法更新为 👉 dishait/tov-template#7-%E，当然你仍然可以通过在 presets/index.ts 里把 directoryAsNamespace 改为 false 延用旧模式