如何在Vite中实现Webpack内联Loader的等效功能？

Vite没有和Webpack完全一致的内联Loader语法，但可以通过内置的查询参数实现相同的效果——直接获取SCSS编译后的CSS字符串。

核心实现方式 #

直接在导入路径后添加?raw查询参数即可，Vite会自动完成SCSS编译，并返回编译后的纯CSS字符串：

import cssStr from '@/extensions/main.scss?raw';
// cssStr 就是你需要的编译后CSS字符串

原理说明 #

和Webpack手动指定Loader链不同，Vite会根据文件类型自动调用对应的内置处理逻辑（比如处理SCSS时会自动编译为CSS），?raw参数的作用是告诉Vite：不要将处理后的样式注入页面，而是以原始字符串的形式返回结果。

自定义扩展场景 #

如果需要更复杂的自定义处理（类似Webpack多Loader组合），可以通过Vite插件实现自定义的资源处理逻辑，不过对于大部分常规场景，内置的查询参数已经足够满足需求。

内容的提问来源于stack exchange，提问作者Gorilka