PikaCSS

Appearance

Installation ​

Vite ​

  1. Install the vite plugin ​

bash
pnpm add -D @pikacss/vite-plugin-pikacss
bash
yarn add -D @pikacss/vite-plugin-pikacss
bash
npm install -D @pikacss/vite-plugin-pikacss

  1. Apply the vite plugin ​

vite.config.ts
ts
import PikaCSS from '@pikacss/vite-plugin-pikacss'
import { defineConfig } from 'vite'

export default defineConfig({
	plugins: [
		PikaCSS({ /* ...vite plugin options */ }),
	],
})

  1. Import the virtual module ​

main.ts
ts
import 'virtual:pika.css'

Nuxt3 ​

  1. Install the nuxt module ​

bash
pnpm add -D @pikacss/nuxt-pikacss
bash
yarn add -D @pikacss/nuxt-pikacss
bash
npm install -D @pikacss/nuxt-pikacss

  1. Apply the nuxt module ​

nuxt.config.ts
ts
export default defineNuxtConfig({
	modules: [
		'@pikacss/nuxt-pikacss',
	],

	pikacss: { /* ...nuxt module options */ },
})

Auto Generated Files ​

  • pika.config.js - The configuration file for PikaCSS engine, only generated once if there is no config file found or any inline config.
  • pika.dev.css - The generated CSS file containing all the styles used in your project. This file is generated during development and is not intended for production use.
  • pika.gen.ts - The generated TypeScript file containing type definitions and utility functions for PikaCSS.

Feel free to add pika.dev.css and pika.gen.ts to your .gitignore file, as they are auto-generated files and should not be committed to your version control system.