CSS/preprocessor integration configuration

Project Configuration and Basic Usage CSS/Preprocessor Integration Configuration

Vite provides out-of-the-box CSS support and also integrates with popular CSS preprocessors like Sass, Less, and Stylus. With simple configuration, these preprocessors can be seamlessly integrated, allowing developers to write style code more efficiently.

Basic CSS Configuration

In a Vite project, you can directly import .css files, and these styles will be automatically injected into the page. Vite handles HMR (Hot Module Replacement) for CSS files, enabling style changes to take effect instantly without refreshing the page.

// Import CSS files in main.js or components  
import './styles/main.css'  

For CSS modularity, Vite supports the .module.css suffix convention:

import styles from './styles/module.module.css'  

function Component() {  
  return <div className={styles.container}>Content</div>  
}  

Preprocessor Integration

Sass/SCSS Configuration

To use Sass, first install the required dependency:

npm install -D sass  

After installation, Vite will automatically recognize .scss and .sass files:

// variables.scss  
$primary-color: #42b983;  

// Usage in components  
<style lang="scss">  
@import './styles/variables';  

.container {  
  color: $primary-color;  
}  
</style>  

Less Configuration

Install Less support:

npm install -D less  

Usage example:

// styles.less  
@primary-color: #42b983;  

.container {  
  background-color: @primary-color;  
}  

Stylus Configuration

Install Stylus support:

npm install -D stylus  

Usage example:

// styles.styl  
primary-color = #42b983  

.container  
  border 1px solid primary-color  

Global Styles and Variable Injection

For variables and mixins shared across multiple components, automatic injection can be configured in Vite:

// vite.config.js  
import { defineConfig } from 'vite'  

export default defineConfig({  
  css: {  
    preprocessorOptions: {  
      scss: {  
        additionalData: `@import "./src/styles/variables.scss";`  
      },  
      less: {  
        additionalData: `@import "./src/styles/variables.less";`  
      }  
    }  
  }  
})  

PostCSS Configuration

Vite has built-in PostCSS support. Simply create a postcss.config.js file in the project root:

// postcss.config.js  
module.exports = {  
  plugins: [  
    require('autoprefixer'),  
    require('postcss-preset-env')({  
      stage: 3,  
      features: {  
        'nesting-rules': true  
      }  
    })  
  ]  
}  

CSS Splitting and Optimization

During production builds, Vite automatically extracts CSS into separate files. The default behavior can be modified via configuration:

// vite.config.js  
export default defineConfig({  
  build: {  
    cssCodeSplit: false, // Disable CSS code splitting  
    cssTarget: 'chrome61' // Specify target browser  
  }  
})  

Custom CSS Module Class Names

You can customize the format of CSS module-generated class names:

// vite.config.js  
export default defineConfig({  
  css: {  
    modules: {  
      localsConvention: 'camelCaseOnly',  
      generateScopedName: '[name]__[local]___[hash:base64:5]'  
    }  
  }  
})  

Modern CSS Feature Support

Vite supports modern CSS features like CSS variables, CSS Nesting (requires PostCSS plugin support), etc.:

:root {  
  --main-color: #42b983;  
}  

.container {  
  color: var(--main-color);  

  & > .item {  
    padding: 1rem;  
  }  
}  

Deep Integration with Frameworks

Style Handling in Vue

In Vue single-file components, various preprocessors can be easily used:

<template>  
  <div class="container">Content</div>  
</template>  

<style lang="scss" scoped>  
.container {  
  color: $primary-color;  
}  
</style>  

CSS-in-JS Solutions in React

While Vite primarily handles traditional CSS files, it can also work with CSS-in-JS libraries:

// Install styled-components  
npm install styled-components @types/styled-components  

// Usage example  
import styled from 'styled-components'  

const Button = styled.button`  
  background: ${props => props.primary ? '#42b983' : 'white'};  
  color: ${props => props.primary ? 'white' : '#42b983'};  
`  

Performance Optimization Tips

1. Import CSS On-Demand: Only import CSS files in the components that need them.
2. Use Pure CSS Variables: Avoid the limitations of preprocessor variables that cannot be modified at runtime.
3. Leverage Build-Time Optimization: Vite automatically handles CSS minification and autoprefixing.

// Example of on-demand import  
import styles from './Component.module.css'  

function Component() {  
  return <div className={styles.container}>Content</div>  
}  

Common Issue Resolution

1. Preprocessor Not Working: Check if the corresponding preprocessor package (sass/less/stylus) is installed.
2. Global Variables Not Injected: Verify that the additionalData configuration path is correct.
3. CSS Module Class Name Conflicts: Adjust the generateScopedName configuration to increase hash length.

// Debugging CSS configuration  
console.log(import.meta.env.VITE_CSS_CONFIG)  

Advanced Configuration Options

Vite provides fine-grained CSS configuration options to meet various complex requirements:

// vite.config.js  
export default defineConfig({  
  css: {  
    devSourcemap: true, // Enable sourcemaps in development  
    transformer: 'postcss', // Specify CSS transformer  
    preprocessorMaxWorkers: 4 // Maximum number of preprocessor worker threads  
  }  
})  

Integration with Tailwind CSS

Vite can easily integrate with Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer  
npx tailwindcss init  

Configure tailwind.config.js:

module.exports = {  
  content: [  
    './index.html',  
    './src/**/*.{vue,js,ts,jsx,tsx}'  
  ],  
  theme: {  
    extend: {},  
  },  
  plugins: [],  
}  

Import Tailwind in CSS files:

@tailwind base;  
@tailwind components;  
@tailwind utilities;