Vite's CSS configuration is managed through the css object in vite.config.js, providing fine-grained control over CSS Modules, preprocessor options for Sass/Less, and PostCSS integration for advanced transformations
Vite provides comprehensive CSS handling through its css configuration option, offering developers control over three key areas: CSS Modules for locally scoped class names, preprocessor options for Sass/Less/Stylus customization, and PostCSS integration for advanced CSS transformations. These configurations allow teams to implement modern CSS engineering practices while maintaining excellent development experience and build performance .
Vite automatically supports CSS Modules for files ending with
.module.css,.module.scss, or.module.less.Configure modules through the
css.modulesobject, which accepts all options frompostcss-modules.Key options include:
scopeBehaviour('global' or 'local'),generateScopedNamefor custom class naming patterns,hashPrefixfor custom hash salts, andglobalModulePathsfor paths that should always be treated as global .Example:
css: { modules: { generateScopedName: '[name]_[local]_[hash:base64:5]' } }.
The preprocessorOptions configuration allows you to pass custom options to CSS preprocessors like Sass, Less, and Stylus. This is particularly useful for injecting global variables, mixins, or functions across all your style files without manually importing them .
Sass/SCSS: Use
css.preprocessorOptions.scssorcss.preprocessorOptions.sass(note the different extensions). TheadditionalDataoption is most common for injecting global variables .Less: Configure via
css.preprocessorOptions.less. SupportsmodifyVarsfor theme customization andadditionalDatafor global imports .Stylus: Configure via
css.preprocessorOptions.styluswith support fordefineto expose JavaScript variables andincludefor import paths .All preprocessor options support
additionalData, which injects content at the beginning of every preprocessed file—ideal for global variables and mixins .
Vite includes PostCSS support out of the box, processing all CSS files through configured plugins. You can configure PostCSS either through a dedicated postcss.config.js file or directly in your Vite configuration. PostCSS enables powerful transformations like autoprefixing, CSS nesting, custom properties, and future CSS syntax support .
Inline configuration: Use
css.postcssobject invite.config.jswithpluginsarray and processor options .External configuration: Place
postcss.config.jsin your project root—Vite automatically detects and uses it .The
pluginsarray accepts PostCSS plugins (likeautoprefixer,postcss-preset-env,cssnano) and supports both string references and inline plugin functions .TypeScript note: The plugins array accepts
PostCSS.AcceptedPlugin[], which includes bothPluginandPluginCreatortypes (important for plugins liketailwindcssthat export creators) .Common plugins include:
autoprefixerfor vendor prefixes,postcss-importfor@importresolution, andcssnanofor production minification .
Beyond the three main categories, Vite offers supplementary CSS configuration options. css.devSourcemap enables source maps during development for easier debugging of transformed CSS . The css.lightningcss option (experimental) replaces PostCSS with Lightning CSS for faster processing . You can also configure css.extract to control whether CSS is extracted during build (default true for production) .