Windi CSS Nuxt

安裝

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

用法

在您的 nuxt.config.js 中添加以下內(nèi)容。

?nuxt.config.js?

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

Nuxt 3

注意：Nuxt 3 和 Nuxt Bridge 不再需要 buildModules；所有模塊都應該添加到模塊中。

?nuxt.config.js?

import { defineNuxtConfig } from 'nuxt3'

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

從 tailwind 遷移

該模塊不適用于@nuxtjs/tailwindcss，您需要將其刪除。

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

如果您有 ?tailwind.config.js?，請將其重命名為 ?windi.config.js? 或 ?windi.config.ts?。

請按照遷移指南了解其他更改詳情。

配置

預檢（樣式重置）

預檢是按需啟用的。如果你想完全禁用它，你可以配置如下

?windi.config.ts?

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  preflight: false,
})

Safelist

默認情況下，我們會靜態(tài)掃描您的源代碼并找到實用程序的所有用法，然后按需生成相應的 CSS。但是，存在一些限制，即無法有效匹配在運行時決定的實用程序，例如

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

為此，您需要在 windi.config.js 的安全列表選項中指定可能的組合。

?windi.config.ts?

import { defineConfig } from 'windicss/helpers'

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

或者你可以這樣做

?windi.config.ts?

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
  ],
})

Scanning

在服務器啟動時，nuxt-windicss 將掃描您的源代碼并提取實用程序用法。默認情況下，只會包含根目錄中擴展名為 vue、html、md、mdx、pug、jsx、tsx 的文件。如果要啟用掃描其他文件類型的位置，可以通過以下方式配置：

?windi.config.js?

import { defineConfig } from 'windicss/helpers'

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

或者在 nuxt 配置中：

?nuxt.config.js?

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

其他選項

這些是 nuxt 模塊的默認選項。

?nuxt.config.js?

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',
      },
    },
  },
}

• 有關(guān)配置參考，請參閱 options.ts。

nuxt 模塊提供了與 vite 插件相同的配置 API。

例子

從 node_modules 包中掃描類

開箱即用的這個模塊會忽略 node_modules 中的任何文件，這是為了簡化大多數(shù)用戶的掃描。

要選擇加入此掃描，您需要自己設(shè)置掃描選項。

?nuxt.config.js?

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
      },
    },
  },
}

從 node_modules 包中轉(zhuǎn)換@apply

如果您需要從 node_module 文件夾加載 CSS 文件并轉(zhuǎn)換 @apply，則需要使用 extraTransformTargets 選項。

?nuxt.config.js?

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

在傳遞給 webpack 插件之前修改 Windi CSS 配置。

用于進行運行時樣式更改。

?windicss:options?

• Arguments: options

在將它們傳遞給 webpack 插件之前修改 Windi CSS 選項。

用于將運行時目錄添加到掃描路徑。

?windicss:utils?

• Arguments: Windi CSS utils

將 Windi CSS 實用程序公開為對象。使用它來實現(xiàn)您自己的自定義實用程序，而無需創(chuàng)建重復的實用程序?qū)嵗?/p>