Discuss css options in vite config — modules, preprocessorOptions, postcss

Question

Accepted Answer

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.modules` object, which accepts all options from `postcss-modules` . Key options include: `scopeBehaviour` ('global' or 'local'), `generateScopedName` for custom class naming patterns, `hashPrefix` for custom hash salts, and `globalModulePaths` for paths that should always be treated as global . Example: `css: { modules: { generateScopedName: '[name]_[local]_[hash:base64:5]' } }` . ```javascript
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    modules: {
      // Custom class naming pattern
      generateScopedName: '[name]_[local]_[hash:base64:5]',
      // Enable camelCase imports (e.g., import styles from './style.module.css')
      localsConvention: 'camelCaseOnly',
      // Hash prefix for uniqueness
      hashPrefix: 'vite',
      // Paths that should be treated as global CSS
      globalModulePaths: [/node_modules/]
    }
  }
})
``` 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.scss` or `css.preprocessorOptions.sass` (note the different extensions). The `additionalData` option is most common for injecting global variables . Less: Configure via `css.preprocessorOptions.less`. Supports `modifyVars` for theme customization and `additionalData` for global imports . Stylus: Configure via `css.preprocessorOptions.stylus` with support for `define` to expose JavaScript variables and `include` for import paths . All preprocessor options support `additionalData`, which injects content at the beginning of every preprocessed file—ideal for global variables and mixins . ```javascript
// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  css: {
    preprocessorOptions: {
      // SCSS configuration
      scss: {
        // Inject global variables and mixins into every SCSS file
        additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.scss')}";`,
        // Custom importer for aliases
        importer: (url) => ({ file: path.resolve(__dirname, `src/styles/${url}`) })
      },
      // Less configuration
      less: {
        // Modify Less variables for theming
        modifyVars: {
          'primary-color': '#1890ff',
          'border-radius-base': '2px'
        },
        javascriptEnabled: true
      },
      // Stylus configuration
      stylus: {
        // Define global stylus functions
        define: {
          '$color-primary': '#1890ff'
        }
      }
    }
  }
})
``` 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.postcss` object in `vite.config.js` with `plugins` array and processor options . External configuration: Place `postcss.config.js` in your project root—Vite automatically detects and uses it . The `plugins` array accepts PostCSS plugins (like `autoprefixer`, `postcss-preset-env`, `cssnano`) and supports both string references and inline plugin functions . TypeScript note: The plugins array accepts `PostCSS.AcceptedPlugin[]`, which includes both `Plugin` and `PluginCreator` types (important for plugins like `tailwindcss` that export creators) . Common plugins include: `autoprefixer` for vendor prefixes, `postcss-import` for `@import` resolution, and `cssnano` for production minification . ```javascript
// Option 1: Inline in vite.config.js
import { defineConfig } from 'vite'
import autoprefixer from 'autoprefixer'
import postcssPresetEnv from 'postcss-preset-env'

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
        }),
        postcssPresetEnv({
          stage: 2,
          features: {
            'nesting-rules': true
          }
        })
      ]
    }
  }
})

// Option 2: External postcss.config.js
// postcss.config.js
export default {
  plugins: {
    'tailwindcss': {},
    'autoprefix

Discuss css options in vite config — modules, preprocessorOptions, postcss

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

Discuss css options in vite config — modules, preprocessorOptions, postcss

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

Scenario Questions

Follow-up Questions

Discuss css options in vite config — modules, preprocessorOptions, postcss

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

Discuss css options in vite config — modules, preprocessorOptions, postcss

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

Scenario Questions

Follow-up Questions

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'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