scss files as input considered as js file

[raphaelApard]

Hi,

I'm working on a project using vite, but we don't have a single entry file.
We need to process some scss files and some typescript files.

I use the following vite config with all ts and scss file as entry, but vite consider scss as javascript file too.

• Legacy plugin generate a legacy file for each scss file.
• If there is a scss file et and a ts file with the same name, the css file is not in output.

I did an example project with the following structure :

scripts/
   same-name.ts
   script-a.ts
   script-b.ts
styles/
   same-name.scss
   style-a.scss
   style-b.scss

Output after build is :

dist/
   js/
      same-name-legacy.min.js
      same-name.min.js
      script-a-legacy.min.js
      script-a.min.js
      script-b-legacy.min.js
      script-b.min.js
      style-a-legacy.min.js
      style-b-legacy.min.js
   style-a.css
   style-b.css

Is there a wait to tell vite to not consider scss file as js ?

Here my vite configuration :

import path from 'path';
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';
import { globSync } from 'glob';
import legacy from '@vitejs/plugin-legacy'


const sources = [`scripts/**/*.ts`, `styles/**/*.scss`];
const globs: string[] = [];
[...sources].forEach((source) =>
  globs.push(
    ...globSync(path.resolve(__dirname, source)),
  ),
);
const entries: Record<string, string> = [...globs].reduce((acc, current) => {
  const key = path.basename(current, path.extname(current));
  Object.assign(acc, { [key]: current });
  return acc;
}, {});

/** @type {import('vite').UserConfig} */
const config = ({ mode }) => {
  return defineConfig({
    base: './',
    publicDir: false,
    plugins: [
      legacy(),
    ],
    css: {
      devSourcemap: mode === 'development',
      postcss: {
        plugins: [autoprefixer()],
      },
    },
    build: {
      rollupOptions: {
        input: {
          ...entries,
        },
        output: {
          entryFileNames: 'js/[name].min.js',
          assetFileNames: '[name][extname]',
        },
      },
      minify: mode !== 'development',
    },
  });
};

export default config;

[spragucm]

Well, this is utterly absurd. The solution for me was to add a comment at the top of the file. For example

/* Required for Vite to consider this a css file if it's empty */