skills.rest
OpenAEC-Foundation
OpenAEC-FoundationOFFICIAL
Explore all skills by this author →
GitHub

vite-syntax-resolve-css

Configure Vite resolve and CSS options to prevent import misconfigurations.

4|Updated Mar 20, 2026
Search Tags:#typescript#vite#css-modules#postcss#resolve-alias#lightning-css
One-click install
npx skills add https://github.com/OpenAEC-Foundation/OpenAEC-Workspace-Composer --skill vite-syntax-resolve-css
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vite-syntax-resolve-css
Source: https://github.com/OpenAEC-Foundation/OpenAEC-Workspace-Composer/tree/main/.claude/skills/vite/vite-syntax/vite-syntax-resolve-css
Command: npx skills add https://github.com/OpenAEC-Foundation/OpenAEC-Workspace-Composer --skill vite-syntax-resolve-css

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers correctly configure Vite's path aliasing, CSS modules, and CSS preprocessors to prevent common misconfigurations that break imports and style processing.

Core Features & Use Cases

  • Supports configure options for resolve.alias, resolve.extensions, resolve.dedupe, and resolve.tsconfigPaths
  • Covers CSS processing options including css.modules, css.preprocessorOptions, css.transformer, and css.lightningcss
  • Includes guidance for json and html CSP nonce integration across Vite projects

Quick Start

Configure Vite syntax and resolve options for your project to avoid common misconfigurations.

Frequently Asked Questions about vite-syntax-resolve-css

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure resolve.alias and CSS modules in Vite to prevent import errors?▼

To configure Vite syntax and resolve options safely, this Skill streamlines setting up resolve.alias, extensions, dedupe, and tsconfigPaths alongside css.modules to prevent common misconfigurations that break imports and style processing.

What is the correct way to set up Lightning CSS as a transformer in Vite?▼

Setting up Lightning CSS in Vite involves configuring the css.transformer and css.lightningcss options, which this Skill guides to ensure your CSS preprocessors and transformers are correctly applied without breaking style processing.

Does this Vite configuration guidance apply to older versions like Vite 5?▼

This Vite configuration guidance specifically targets Vite 6 through 8, ensuring path aliases, PostCSS, Lightning CSS, and JSON options are safely recognized across those supported versions.

How do I integrate CSP nonce and JSON configuration options across a Vite project?▼

Integrating CSP nonce and JSON options across Vite projects requires specific syntax configuration, which this Skill provides to ensure html CSP nonce integration and JSON processing are correctly applied without misconfigurations.

Why do my Vite path aliases break when using TypeScript tsconfigPaths?▼

Vite path aliases break due to common resolve misconfigurations, which this Skill prevents by safely configuring resolve.alias, resolve.dedupe, and resolve.tsconfigPaths to ensure imports map correctly.

Can I configure PostCSS preprocessor options safely alongside Vite path aliases?▼

Yes, you can configure PostCSS preprocessor options and path aliases together safely using this Skill, which streamlines both css.preprocessorOptions and resolve.alias settings to prevent import and style processing conflicts.

Related Skills

Explore More Software Engineering Skills→
johnnystefanjohnnystefan

vite

Configure Vite 8 with Rolldown bundler for fast builds.

Community
Intermediate
Impertio-StudioImpertio-Studio
3

vite-syntax-resolve-css

Configure Vite resolve and CSS pipelines with best-practice rules.

Official
Intermediate
futureteafuturetea

Vite Configuration

Generate typed Vite configs for React and TypeScript projects.

Community
Advanced
yoanbernabeuyoanbernabeu
34

slidev-latex

Render inline and display math in Slidev presentations using KaTeX.

Community
Intermediate