如何在ViteJS中使用自定义loader处理指定路径的CSS文件

首先你需要先安装Sass依赖，Vite 内置了Sass预处理能力，但不会默认安装对应依赖：

# npm
npm install sass -D
# pnpm
pnpm add sass -D
# yarn
yarn add sass -D

之后修改你的vite.config.js或vite.config.ts配置，核心逻辑是通过自定义插件匹配指定路径的.css文件，强制标记为Sass类型让Vite走Sass预处理流程，和你给出的Webpack配置对应写法如下：

import { defineConfig } from 'vite'

export default defineConfig({
  // 可按需添加Sass全局配置，对应webpack中sass-loader的options参数
  css: {
    preprocessorOptions: {
      scss: {
        // 示例：全局注入公共变量文件，不需要可以删掉这段
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },
  plugins: [
    // 自定义插件，匹配指定路径的css文件走sass处理
    {
      name: 'custom-css-to-sass',
      transform(code, id) {
        // 正则和你webpack配置中的test规则完全一致，可按需修改
        if (/ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/.test(id)) {
          return {
            code,
            map: null,
            // 标记文件为scss类型，触发Vite内置sass处理
            meta: { vite: { lang: 'scss' } }
          }
        }
      }
    }
  ]
})

补充说明 #

• 如果你需要使用其他自定义loader，只需要在transform钩子中按照loader逻辑处理code返回即可，执行顺序和plugins数组的顺序一致。
• 上述配置兼容Vite3及以上所有版本，低版本Vite如果出现不生效的情况，可以把匹配到的文件后缀手动修改为.scss后再返回，效果完全一致。

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