Windi CSS webpack

選擇合適的插件

Windi CSS Webpack 插件是一種與語言和框架無關(guān)的方式，用于在 webpack 應(yīng)用程序中實現(xiàn) Windi CSS。

一流的框架支持

如果在下面，請使用專門為您的框架構(gòu)建的插件。

二級框架支持

已成功設(shè)置和記錄以與 Windi 一起使用的框架。

不支持的框架

已使用此軟件包進行測試但無法正常工作的框架。

• ? Angular

安裝

如果您正在使用自定義 webpack 構(gòu)建進??行設(shè)置，請報告您發(fā)現(xiàn)的任何問題。

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

如果您之前使用的是 Tailwind，請參閱遷移指南。

配置webpack

您需要將插件添加到您的 webpack 配置中。如果您有權(quán)直接修改 webpack.config.js，則可以執(zhí)行以下操作。

?webpack.config.js?

import WindiCSSWebpackPlugin from 'windicss-webpack-plugin'

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

非 ES 模塊安裝

對于不支持 es 模塊導(dǎo)入語法的 webpack 配置，您可以嘗試以下操作。

?webpack.config.js?

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

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

包含虛擬模塊

在入口點文件或僅加載一次的文件中，添加導(dǎo)入。

ESM

?main.js?

import 'windi.css'

CJS

?main.js?

require('windi.css')

Windi 配置

如果您還沒有名為 windi.config.ts 的文件，請將其添加到您的項目根目錄中。

掃描

如果您在啟動 Windi 時遇到問題，沒有選擇您的課程，您可能需要修改掃描。

在服務(wù)器啟動時，Windi 將掃描您的代碼并提取實用程序用法。默認情況下，只有 src/ 下擴展名為“html”、“vue”、“md”、“mdx”、“pug”、“jsx”、“tsx”、“svelte”、“ts”、“js”的文件， “css”、“postcss”將包含在內(nèi)。

?windi.config.ts?

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

配置

預(yù)檢（樣式重置）

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

?windi.config.ts?

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  preflight: false,
})

Safelist

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

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

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

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

圖層排序

默認情況下，導(dǎo)入 windi.css 或 virtual:windi.css 將導(dǎo)入所有三層，順序為基礎(chǔ) - 組件 - 實用程序。如果您想更好地控制訂單，可以通過以下方式將它們分開：

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

完整配置

有關(guān)完整的配置詳細信息，請參閱 options.ts。

安裝示例

Next.js

?next.config.js?

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

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

?pages/_app.js?

import 'windi.css'

?windi.config.js?

import { defineConfig } from 'windicss/helpers'

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

注意：JSX 的使用是實驗性的。請報告您發(fā)現(xiàn)的任何問題。

創(chuàng)建 React 應(yīng)用程序 - CRACO

?craco.config.js?

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

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

?src/index.js?

import './windi.css'

?windi.config.ts?

import { defineConfig } from 'windicss/helpers'

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

注意：JSX 的使用是實驗性的。請報告您發(fā)現(xiàn)的任何問題。

無 ES 模塊

對于不支持 es 模塊導(dǎo)入語法的 webpack 配置，您可以嘗試以下操作。

?webpack.config.js?

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

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

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

Storybook

?.storybook/main.js?

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

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

?.storybook/preview.js?

import 'windi.css'

警告：CSS 預(yù)處理器（如 SCSS、LESS）不適用于@apply，請使用純 css。

代碼示例

請參閱示例項目的示例。