[Bug]: 无法引入公共静态资源

[ascodelife]

版本信息

$ npm ls @modern-js/app-tools
monorepo@ E:\monorepo-test
└── (empty)

问题详情

按照文档https://modernjs.dev/docs/apis/hooks/mwa/config/public将svg放到目录下，在App.tsx中引入发生报错

./src/App.tsx
Module not found: You attempted to import ../config/public/back.svg which is not allowed. 
Allowed dirs: src/,shared/. Allowed patterns: /node_modules/. 
Please check the source.moduleScopes configuration.  

如何在js和css文件中正确引用静态资源？

问题复现

https://github.com/ascodelife/monorepo-test

[chenjiahan]

错误文案里已经提供解决方案了喔，默认代码只能从 src、node_modules 目录里引用，你的图片在 config 目录下，因此需要配置 source.moduleScopes 字段。

// modern.config.js
import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  source: {
    moduleScopes: ['./config']
  }
});

[ascodelife]

错误文案里已经提供解决方案了喔，默认代码只能从 src、node_modules 目录里引用，你的图片在 config 目录下，因此需要配置 source.moduleScopes 字段。

// modern.config.js
import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  source: {
    moduleScopes: ['./config']
  }
});

这个配置我了解，我纠结的问题是，文档里给出约定的静态资源目录为config/public，但是却没有默认在配置项source.moduleScopes中给该目录放行，那么有没有一种可能config/public里存放的文件本来就不是给代码引用，而是与ci/cd相关的文件？希望能够解答。

[chenjiahan]

这个确实存疑，有两种解决方向：

1. source.moduleScopes 的默认值中添加 ./config/public，图片依然放在此目录。
2. 把代码引用的图片放到 src 下的某个目录中，与 config/public 区分开。

@xuchaobei 有啥建议不~

[chenjiahan]

@ascodelife 确认了下，config/public 下放的主要是需要 Serve 到 Web 应用域名下的静态资源，像代码中需要 import 的图片等静态资源，建议放到 src/assets 目录下进行管理，我们后续会在文档上标明。