vitejs-plugin-auto-css-import

Automatically import CSS files with the same name as your JSX/TSX components.

Features

• 🎯 Zero configuration - Works out of the box
• 🔥 Hot reload support - Seamless development experience
• 📦 Multiple formats - Supports CSS, SCSS, Sass, Less, and Stylus
• ⚡ Fast - Only processes files that need transformation
• 🛠️ Configurable - Customize extensions and file patterns

Installation

npm install -D vitejs-plugin-auto-css-import
# or
yarn add -D vitejs-plugin-auto-css-import
# or
pnpm add -D vitejs-plugin-auto-css-import
# or
bun install -D vitejs-plugin-auto-css-import

Usage

Basic Setup

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import autoCssImport from 'vitejs-plugin-auto-css-import';

export default defineConfig({
    plugins: [react(), autoCssImport()],
});

With Options

autoCssImport({
    extensions: ['.css', '.scss', '.sass'],
    debug: true,
});

How It Works

For each JSX/TSX file, the plugin automatically looks for a corresponding style file with the same name:

src/
  components/
    Button.css
    Button.jsx      ← Automatically gets: import './Button.css';

    Header.scss
    Header.tsx      ← Automatically gets: import './Header.scss';

Configuration

Options

| Option | Type | Default | Description | | ------------ | ---------- | ---------------------------------------------- | --------------------------------- | | extensions | string[] | ['.css', '.scss', '.sass', '.less', '.styl'] | Style file extensions to look for | | debug | boolean | false | Enable debug logging |

Example

autoCssImport({
    extensions: ['.module.css', '.scss'],
    debug: process.env.NODE_ENV === 'development',
});

Why Use This Plugin?

• Reduces boilerplate - No need to manually import style files
• Prevents forgetting imports - Styles are automatically included
• Maintains co-location - Keep components and styles together
• Works with hot reload - Seamless development experience

License

MIT