CSS 预处理器高级配置

Vite 支持对 Sass/Less 预处理器进行深度配置。

Sass 配置

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 全局变量注入
        additionalData: `@use "@/styles/variables.scss" as *;`,
        // API 选项
        api: 'modern-compiler',
        // 导入路径
        includePaths: ['src/styles']
      }
    }
  }
})

Sass 现代编译器

npm add -D sass-embedded

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',  // 使用新编译器
        silenceDeprecations: ['legacy-js-api']
      }
    }
  }
})

注意：modern-compiler 编译速度更快。

Less 配置

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        // 全局变量
        additionalData: `@import "@/styles/variables.less";`,
        // Math 模式
        math: 'always'
      }
    }
  }
})

全局变量注入

// variables.scss
$primary: #3498db;
$font-size: 14px;

// 组件中可直接使用
.button {
  color: $primary;  // 无需手动导入
  font-size: $font-size;
}

配置选项对比

多文件全局注入

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/styles/variables.scss" as *;
          @use "@/styles/mixins.scss" as *;
        `
      }
    }
  }
})

Stylus 配置

export default defineConfig({
  css: {
    preprocessorOptions: {
      styl: {
        imports: ['src/styles/variables.styl']
      }
    }
  }
})

要点总结

• preprocessorOptions 配置预处理器
• additionalData 全局注入变量/混合
• api: 'modern-compiler' 使用新编译器
• includePaths 配置导入路径