Интеграция для Nuxt.js #

Установка #

yarn add nuxt-windicss -D
# npm i nuxt-windicss -D

Применение #

В ваш nuxt.config.js добавьте следующее.

export default {
  buildModules: [
    'nuxt-windicss',
  ],
}

Nuxt 3 #

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  buildModules: [
    'nuxt-windicss',
  ],
})

Миграция с tailwind #

Этот модуль не будет работать с @nuxtjs/tailwindcss, вам нужно будет удалить его.

buildModules: [
-  '@nuxtjs/tailwindcss',
],

Если у вас есть tailwind.config.js, переименуйте его в windi.config.js или windi.config.ts.

Следуйте руководству по миграции, чтобы узнать о других изменениях.

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

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

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

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  preflight: false,
})

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

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

<!-- will not be detected -->
<div :class="{ ['p-'+size]: true}">

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

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-30
    range(10).map(i => `mt-${i}`), // mt-1 to mt-10
  ],
})

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

При запуске сервера nuxt-windicss просканирует ваш исходный код и извлечет использованные утилиты. По умолчанию будут включены только файлы в корневом каталоге с расширениями vue, html, md, mdx, pug, jsx, tsx. Если вы хотите включить сканирование для других типов файлов, вы можете настроить это с помощью:

import { defineConfig } from 'windicss/helpers'

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

Или в конфигурации nuxt:

export default {
  // ...
  windicss: {
    scan: {
      dirs: ['./'],
      exclude: [
        'node_modules',
        'dist',
      ],
    },
  },
}

Другие параметры #

Это параметры по умолчанию для модуля nuxt.

export default {
  // ...
  windicss: {
    scan: {
      dirs: ['./'],
      exclude: [
        'node_modules',
        'dist',
        '.git',
        '.github',
        '.nuxt',
        // testing files & folders
        'coverage',
        '**/__snapshots__',
        '*.test.js',
      ],
    },
    preflight: {
      alias: {
        // add nuxt aliases
        'nuxt-link': 'a',
        // @nuxt/image module
        'nuxt-img': 'img',
      },
    },
  },
}

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

Модуль nuxt предоставляет тот же API конфигурации, что и плагин vite.

Примеры #

Сканирование классов из пакета node_modules #

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

Чтобы принять участие в этом сканировании, вам нужно будет самостоятельно установить параметры сканирования.

export default {
  // ...
  hooks: {
    windicss: {
      options(options) {
        options.scanOptions.exclude = ['.git', '.github', '.nuxt/**/*']
        options.scanOptions.dirs = [
          './node_modules/vue-tailwind-color-picker/src',
          './components',
          './pages',
          './layouts',
        ]
        return options
      },
    },
  },
}

Преобразование @apply's из пакета node_modules #

Если вам нужно загрузить файл CSS из папки node_module и преобразовать @apply', вам нужно будет использовать опцию extraTransformTargets.

export default {
  // ...
  hooks: {
    windicss: {
      options(options) {
        const transformFiles = await fg(
          '**/*.{vue,css}',
          {
            cwd: join(options.rootDir, '/node_modules/some-vendor/dist'),
            onlyFiles: true,
            absolute: true,
          },
        )
        // make sure file @apply's get transformed
        windiOptions.scanOptions.extraTransformTargets = {
          css: transformFiles.filter((f: string) => f.endsWith('.css')),
          detect: transformFiles.filter((f: string) => f.endsWith('.vue')),
        }

        return options
      },
    },
  },
}

Хуки #

Вы можете использовать следующие хуки nuxt, чтобы изменить поведение кода.

windicss:config

• Arguments: FullConfig

Измените конфигурацию CSS Windi, прежде чем она будет передана в плагин webpack.

Полезно для внесения изменений в стиль исполнения.

windicss:options

• Arguments: options

Измените параметры CSS Windi, прежде чем они будут переданы в плагин webpack.

Полезно для добавления каталогов среды выполнения в путь сканирования.

windicss:utils

• Arguments: Windi CSS utils

Предоставляет утилиты CSS Windi как объект. Используйте это для реализации ваших собственных пользовательских утилит без создания дублирующих экземпляров утилит.