导入 GLSL 文件抛出错误 - Vite 项目

问：

所以我目前正在玩三个.js并使用 vite 来设置文档。 我创建了一个单独的 fragment.glsl，因此我不必在着色器材料中编写代码。但是在控制台中，我收到以下错误：

Uncaught SyntaxError: Unexpected token '{' (at fragment.glsl?import:1:13)

fragment.glsl 文件如下所示：

void main() {
        gl_FragColor = vec4(1., 0., 0., 1.);
};

我尝试使用以下命令从我的 /shaders/ 文件夹导入文件：

import fragment from './shaders/fragment.glsl'

当我在着色器材质中使用它时，它希望它运行代码：

this.material = new THREE.ShaderMaterial({
            fragmentShader: fragment,
            uniforms: {
                progress: {
                    type: 'f',
                    value: 0,
                },
                side: THREE.DoubleSide,
            },
        })

但我得到的只是控制台中的错误。我似乎无法弄清楚我做错了什么。没想到导入文件会这么麻烦。有谁看到我做错了什么？