WindiCSS¶

WindiCSS - это утилитарная CSS-библиотека, создаваемая по требованию пользователя. WindiCSS интегрируется с Solid как плагин Vite.

Установить плагин Vite¶

1
2
3
4

# Install (choose one)
npm i --save-dev vite-plugin-windicss windicss
pnpm i --dev vite-plugin-windicss windicss   # Using pnpm
yarn add --dev vite-plugin-windicss windicss # Using yarn

Создание конфигурации¶

WindiCSS - это инструмент, основанный на конфигурации. Создайте файл .windi.config.ts в корне каталога проекта. Он должен выглядеть примерно так:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// windi.config.ts
import { defineConfig } from 'windicss/helpers';
import formsPlugin from 'windicss/plugin/forms';

export default defineConfig({
    darkMode: 'class',
    safelist: 'p-3 p-4 p-5',
    theme: {
        extend: {
            colors: {
                teal: {
                    100: '#096',
                },
            },
        },
    },
    plugins: [formsPlugin],
});

Импорт плагина Vite¶

После установки откройте файл vite.config.js или vite.config.ts. Стартовая конфигурация Solid Vite выглядит следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

import { defineConfig } from 'vite';

import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
    plugins: [solidPlugin()],
    server: {
        port: 3000,
    },
    build: {
        target: 'esnext',
    },
});

Теперь import WindiCSS from "vite-plugin-windicss" и вызываем его как функцию внутри плагинов:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import { defineConfig } from "vite"

+ import WindiCSS from "vite-plugin-windicss"
import solidPlugin from "vite-plugin-solid"

export default defineConfig({
    plugins: [
+       WindiCSS(),
        solidPlugin(),
    ],
    server: {
        port: 3000,
    },
    build: {
        target: "esnext",
    },
})

Обратите внимание, что WindiCSS должен быть упорядочен перед SolidPlugin. Это предотвращает некоторые крайние случаи, такие как &, от экранирования как &.

Импорт WindiCSS¶

Добавьте import "virtual:windi.css" в index.jsx или index.tsx. virtual просто сообщает, что в файловой системе имеется windi.css.

1
2
3
4
5
6
7
8
9

/* @refresh reload */
+ import "virtual:windi.css"

import { render } from 'solid-js/web';

import './index.css';
import App from './App';

render(() => <App />, document.getElementById('root') as HTMLElement);

Поддержка¶

Для получения дополнительной поддержки смотрите Руководство по интеграции WindiCSS/Vite или присоединяйтесь к официальным каналам WindiCSS и Solid JS Discord. 👋

Ссылки¶

• WindiCSS

Комментарии