我有太多的 svg 圖示，無法以推薦的方式將它們全部匯入：
import { ReactComponent as Icon } from 'assets/svg/icon.svg'
所以在我的 JS React 應用程式中，我一直在使用 webpackrequire.context來索引整個 svg 目錄并將其匯出為一個物件，然后我可以這樣做：
import { svg } from 'assets'
function SvgIcon({ icon }) {
const Icon = svg[icon]
return <Icon />
}
/* ... */
<SvgIcon icon='inbox' />
這對我的用例來說很棒，因為我可以動態加載我需要的所有圖示，甚至不必單獨匯入它們。然而，一旦我切換到 Typescript，require.context就不再使用 svg 加載器。這段代碼以前可以完美運行，現在只回傳{ [filename]: "/path/to/filename.39843398.svg" }，如果我根本不使用加載程式，就會發生這種情況。該字串應該是一個 ReactComponent。
const assets = context =>
context.keys().reduce((assets: any, path) => {
const key = path.replace(/^\.\//, '').replace(/\..*$/, '')
assets[key] = context(path).default || context(path)
return assets
}, {})
export const svg = assets(require.context('!@svgr/webpack!./svg', false, /\.svg$/))
Codesandbox 似乎不支持 require.context，但是您可以通過使用--template typescript.上面的代碼塊。
根據您的包管理器和 sdk，您可能需要稍微修改一下配置。我必須安裝 @types/webpack-env 并將它們添加為tsconfig.json這樣：
{
/* ... */
"types": ["node", "webpack-env"]
}
uj5u.com熱心網友回復：
結果證明罪魁禍首是 [email protected]。降級到@4.0.3 解決了這個問題。
順便說一句，@5.0.0 有其他 svg 檔案問題，比如沒有將命名空間標簽轉換為正確的 JSX。可以相關，也可以不相關。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/396481.html
標籤：打字稿 网络包 创建反应应用程序 webpack-loader