Интеграция для webpack #

Выбор правильного плагина #

Плагин Windi CSS Webpack - это независимый от языка и фреймворка способ реализации CSS Windi в приложениях webpack.

Поддержка фреймворка первого класса #

Если он указан ниже, используйте плагин, специально созданный для вашего фреймворка.

Поддержка фреймворка второго класса #

Платформы, которые были успешно настроены и задокументированы для работы с Windi.

Не поддерживаемые фреймворки #

Фреймворки, которые были протестированы с этим пакетом и не работали.

• ❌ Angular

Установка #

Если вы продолжаете установку с пользовательской сборкой веб-пакета, пожалуйста, сообщайте о любых обнаруженных вами проблемах.

yarn add windicss-webpack-plugin -D 
# npm i windicss-webpack-plugin -D

Если вы ранее использовали Tailwind, смотрите руководство по миграции.

Настроить webpack #

Вам нужно будет добавить плагин в конфигурацию вашего веб-пакета. Если у вас есть доступ к непосредственному изменению файла webpack.config.js, вы можете сделать следующее.

import WindiCSS from 'windicss-webpack-plugin'

export default {
  // ...
  plugins: [
    new WindiCSS(),
  ],
}

Установка модулей, отличных от ES #

Для конфигураций webpack, которые не поддерживают синтаксис импорта модуля es, вы можете попробовать следующее.

const WindiCSS = require('windicss-webpack-plugin').default

export default {
  // ...
  plugins: [
    new WindiCSS(),
  ],
}

Включите виртуальный модуль #

В файл точки входа или что-то загруженное только один раз, добавьте импорт windi.css.

import 'windi.css'
// require('windi.css')

Конфиг Windi #

Добавьте файл с именем windi.config.ts в корень вашего проекта, если у вас его еще нет.

Сканирование #

Если при запуске Windi у вас возникают проблемы с тем, что ваши классы не подбираются, возможно, вам придется изменить сканирование.

При запуске сервера Windi просканирует ваш код и извлечет использованные утилиты. По умолчанию только файлы в каталоге src/ с расширениями "html", "vue", "md", "mdx", "pug", "jsx", "tsx", "svelte", "ts", "js", "css", "postcss" будут включены.

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    // A common use case is scanning files from the root directory
    include: ['**/*.{vue,html,jsx,tsx}'],
    // if you are excluding files, make sure you always include node_modules and .git
    exclude: ['node_modules', '.git', 'dist'],
  },
})

Конфигурация #

Предпечатная проверка (сброс стиля) #

Предпечатная проверка включается по запросу. Если вы хотите полностью отключить его, вы можете настроить его, как показано ниже

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  preflight: false,
})

Надежный список (Safelist) #

По умолчанию мы сканируем ваш исходный код статически и находим все случаи использования утилит, а затем сгенерировали соответствующий CSS по запросу. Однако существует некоторое ограничение, заключающееся в том, что утилиты, которые решили во время выполнения, не могут быть эффективно сопоставлены, например

<!-- will not be detected -->
<div className={`p-${size}`}>

Для этого вам нужно будет указать возможные комбинации в параметрах safelist файла windi.config.ts.

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  safelist: 'p-1 p-2 p-3 p-4',
})

Или вы можете сделать это так

import { defineConfig } from 'windicss/helpers'

function range(size, startAt = 1) {
  return Array.from(Array(size).keys()).map(i => i + startAt)
}

export default defineConfig({
  safelist: [
    range(30).map(i => `p-${i}`), // p-1 to p-3
    range(10).map(i => `mt-${i}`), // mt-1 to mt-10
  ],
})

Порядок макетов #

По умолчанию, при импорте windi.css или virtual:windi.css будут импортированы все три слоя в порядке base - components - utilities. Если вы хотите лучше контролировать заказы, вы можете разделить их по:

- import 'virtual:windi.css'
+ import 'virtual:windi-base.css'
+ import 'virtual:windi-components.css'
+ import 'virtual:windi-utilities.css'

Вы также можете сделать так, чтобы ваш собственный CSS мог быть переопределен определенными слоями:

  import 'virtual:windi-base.css'
  import 'virtual:windi-components.css'
+ import './my-style.css'
  import 'virtual:windi-utilities.css'

Полная конфигурация #

Смотрите options.ts для получения полной информации о конфигурации.

Примеры установки #

Next.js #

const WindiCSS = require('windicss-webpack-plugin').default

module.exports = {
  // ...
  webpack(config) {
    config.plugins.push(new WindiCSS())
    return config
  },
}

import 'windi.css'

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['**/*.{jsx,tsx,css}'],
    exclude: ['node_modules', '.git', '.next'],
  },
})

Примечание: использование JSX является экспериментальным. Пожалуйста, сообщайте о любых обнаруженных вами проблемах.

Создать приложение React - CRACO #

const WindiCSS = require('windicss-webpack-plugin').default

module.exports = {
  // ...
  webpack: {
    plugins: {
      add: [
        new WindiCSS({
          virtualModulePath: 'src',
        }),
      ],
    },
  },
}

import './virtual:windi.css'

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['**/*.{jsx,js,css,html}'],
    exclude: ['node_modules', '.git', '.next'],
  },
})

Примечание: использование JSX является экспериментальным. Пожалуйста, сообщайте о любых обнаруженных вами проблемах.

Без ES Модулей #

Для конфигураций webpack, которые не поддерживают синтаксис импорта модуля es, вы можете попробовать следующее.

const WindiCSS = require('windicss-webpack-plugin').default

export default {
  // ...
  plugins: [
    new WindiCSS(),
  ],
}

// main.js
require('windi.css')

Storybook #

const WindiCSS = require('windicss-webpack-plugin').default

module.exports = {
  // ...
  webpackFinal: (config) => {
    config.plugins.push(new WindiCSS())
    return config
  },
}

import 'windi.css'

Предупреждение: препроцессоры CSS (такие как SCSS, LESS) не будут работать с @apply, используйте простой css.

Примеры кода #

Смотрите примеры для простых проектов.