Vite无法编译同名SCSS与JS文件求助（Drupal+Twig环境）

在Drupal环境中使用Twig组件开发，例如button组件目录下包含button.twig、button.js和button.scss文件。使用Vite编译时，SCSS能正常编译为CSS，但button.js无法被编译；将button.js重命名为button2.js这类不同名称后，即可正常编译。想知道有没有无需修改文件名或拆分目录的方法，实现两者同时编译？

当前Vite配置如下：

import { defineConfig } from 'vite';
import multiInput from 'rollup-plugin-multi-input';
import styleLint from 'vite-plugin-stylelint';
import eslintPlugin from 'vite-plugin-eslint';

import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';

import twig from 'vite-plugin-twig-drupal';

import { join } from 'node:path';

export default defineConfig({
  plugins: [
    styleLint({
      include: ['src/**/*.scss', 'components/**/*.scss'],
    }),
    twig({
      namespaces: {
        components: join(__dirname, '../components'),
      },
    }),
    eslintPlugin({
      exclude: ['/virtual:/**', 'node_modules/**'],
      fix: true,
    }),
    multiInput.default(),
  ],
  css: {
    postcss: {
      plugins: [
        autoprefixer(),
        cssnano(),
      ],
    },
  },
  build: {
    emptyOutDir: true,
    rollupOptions: {
      input: [
        './components/**/*.scss',
        './components/**/*.js',
        './src/js/*.js',
        {
          main: './src/scss/main.scss',
        },
      ],
      output: {
        entryFileNames:"[name].js",
        chunkFileNames: "[name].js",
        assetFileNames: "[name].[ext]"
      },
    },
  },
});

问题根源在于Rollup的输出命名规则冲突：当前配置中entryFileNames（JS入口文件输出规则）和assetFileNames（CSS这类资源文件输出规则）都使用[name]作为基础命名，导致同名的JS和SCSS（编译后为CSS）在输出时触发资源覆盖或解析优先级冲突，最终JS文件被忽略。

以下两种方法无需修改原组件文件名或目录结构即可解决：

1. 给JS和CSS分配独立输出目录 #

修改build.rollupOptions.output的命名规则，将JS和CSS分别放到不同子目录，从路径上避免同名冲突：

output: {
  entryFileNames: "js/[name].js", // JS文件统一输出到js子目录
  chunkFileNames: "js/[name].js",
  assetFileNames: "css/[name].[ext]" // CSS文件统一输出到css子目录
},

2. 给输出文件名添加类型标识后缀 #

如果不想拆分目录，可以给CSS或JS的输出文件名添加固定后缀，比如给CSS加上.style标识：

output: {
  entryFileNames: "[name].js",
  chunkFileNames: "[name].js",
  assetFileNames: "[name].style.[ext]" // 编译后的CSS文件名会变为button.style.css
},

补充说明 #

改名button2.js能正常编译的原因，是此时JS输出文件名button2.js和CSS的button.css不再同名，避开了Rollup的资源冲突逻辑。调整输出命名规则后，就能让同名的JS和SCSS文件同时正常编译。

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