这样可以吗？const styles = import.meta.glob(["@/assets/**/*.css"], { eager: true }); export const loadStyle = (styleName: string): string => { for (const name in styles) { if (name.endsWith(styleName) || name.endsWith(`${styleName}.css`)) { console.log(styles[name]); return import.meta.env.DEV ? name : name.replace("src/", ""); } } return styleName; };

在您提供的代码中，您使用了import.meta.glob方法添加了{ eager: true }选项来立即导入所有匹配的CSS文件。这样可以确保在应用加载时，所有匹配的CSS文件都被正确导入。
您的代码看起来是正确的，并且应该能够按预期工作。当调用loadStyle方法时，它会遍历已导入的CSS文件，并根据条件返回对应的样式名。
请确保在使用此代码之前，您已经安装了支持动态导入的构建工具（例如Vite或Webpack）并正确配置了相关的依赖项。
需要注意的是，import.meta.glob方法在不同的构建工具和环境下可能会有所不同。请确保您的构建工具和环境支持此方法，并根据实际情况进行相应的调整。
希望对您有所帮助！如果您有其他问题，请随时提问。

相关问题

const modules = import.meta.glob('./../../assets/icons/svg/*.svg');

const modules = import.meta.glob('./../../assets/icons/svg/.svg'); 这行代码用于动态导入指定路径下的所有SVG图标文件。它使用了import.meta.glob函数，并传入了一个文件路径的匹配模式'./../../assets/icons/svg/.svg'。这个模式表示匹配该路径下的所有以.svg结尾的文件。导入的结果将会是一个包含所有匹配文件路径的对象。

这样动态加载css 打包后会找不到css const styles = import.meta.glob(["@/assets/**/*.css"]); export const loadStyle = (styleName: string): string => { for (const name in styles) { if (name.endsWith(styleName) || name.endsWith(`${styleName}.css`)) { console.log(styles[name]) return import.meta.env.DEV ? name : name.replace("src/", ""); } } return styleName; };

如果您在Vue应用中使用动态加载CSS，并且在打包后无法找到CSS文件，这可能是因为在打包过程中，动态加载的CSS文件路径发生了变化。
为了解决这个问题，您可以尝试更新您的代码如下：
const styles = import.meta.globEager("../assets/**/*.css");

export const loadStyle = (styleName) => {
for (const name in styles) {
if (name.endsWith(styleName) || name.endsWith(`${styleName}.css`)) {
console.log(styles[name]);
return import.meta.env.DEV ? name : name.replace("../", "");
}
}
return styleName;
};

更新的改动包括：

使用import.meta.globEager而不是import.meta.glob。import.meta.globEager会在构建时将所有匹配的CSS文件导入，而不是在运行时动态加载。这样可以确保所有匹配的CSS文件都会被正确地打包到最终的构建文件中。

更新CSS文件路径的处理方式。使用../替换src/来适应打包后的文件路径。

请注意，这种处理方式假设您的CSS文件位于../assets/目录下。如果实际路径不同，请根据您的项目结构进行相应的调整。
通过这些改动，您应该能够正确地打包和加载CSS文件了。希望对您有帮助！如有其他问题，请随时追问。