Windi CSS Nuxt

2023-02-16 17:59 更新

安装

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

用法

在您的 nuxt.config.js 中添加以下内容。

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

默认情况下，我们会静态扫描您的源代码并找到实用程序的所有用法，然后按需生成相应的 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',
      },
    },
  },
}

有关配置参考，请参阅 options.ts。

nuxt 模块提供了与 vite 插件相同的配置 API。

例子

从 node_modules 包中扫描类

开箱即用的这个模块会忽略 node_modules 中的任何文件，这是为了简化大多数用户的扫描。

要选择加入此扫描，您需要自己设置扫描选项。

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 包中转换@apply

如果您需要从 node_module 文件夹加载 CSS 文件并转换 @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
      },
    },
  },
}