Raw import of non-js files

[micha149]

Hey.

I'm trying out vite right now and I'm pretty excited about it. My test playground is a simple react app which uses react-three-fiber to render a simple 3D scene which just works. One special thing when dealing with 3D stuff are shaders which may be placed in its own files, beacuse they are written in GLSL and one may want to get code highlighting. In JS they are simply handled as strings. So, currently a simple import fragmentShader from '../shader/grid.frag.glsl'; wont work, because I get a syntax error.

Is there a way for importing file contents just as text strings?

[patak-dev]

Vite is compatible with most rollup plugins, including file loaders. Check out Awesome Rollup for a list of rollup plugins to try out.

Checking the source code of these two, both should work fine

https://github.com/vwochnik/rollup-plugin-glsl

Converts GLSL shader source files to modules

https://github.com/glslify/rollup-plugin-glslify

Import GLSL strings with glslify (a node.js-style module system for GLSL).

Please report back if you find any issues, and also if they worked correctly, I am starting to add compatible community plugins to https://vite-rollup-plugins.patak.dev, and I still didn't get to these ones 👍🏼

[micha149]

Thank you for this fast answer. rollup-plugin-glslify works fine for me.

[yyx990803]

Or you can just append ?raw at the end of the import