Get rid of CSS in JS output files & extract CSS into separate file.

[otabekoff]

Description

Let's say I am preprocessing SCSS and extracting preprocessed styles into style.css. I am not able to get rid of CSS in my cjs.js | es.js | iife.js | umd.js output files. Globally imported SCSS is being preprocessed and being added into the design of every component. The output files become too large If I add a few more components because of this. How I can resolve this issue?

Suggested solution

I do'nt know the solution. I think, this is a bug. So I am asking help to solve to this. Because this is an issue.

Alternative

No response

Additional context

My vite configuration is:

// vite.config.js
const path = require('path');
const { defineConfig } = require('vite');
const vue = require('@vitejs/plugin-vue');

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "src/assets/styles/main.scss";`

      }
    }
  },
  build: {
    lib: {
      formats: ['es', 'umd', 'cjs', 'iife'],
      entry: path.resolve(__dirname, 'src/entry.js'),
      name: 'MyUI',
      fileName: (format) => `myui.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // Add external deps here
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`
    }
  },
  plugins: [vue()],
  server: {
    fs: {
      allow: [".."],
    },
  },
});

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[github-actions[bot]]

Hello @otabekoff. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.