uniapp，vite整合windicss

官方文档：https://weapp-tw.icebreaker.top/docs/quick-start/frameworks/hbuilderx

安装：

shell 复制代码

npm i -D tailwindcss postcss autoprefixer
# 初始化 tailwind.config.js 文件
npx tailwindcss init


npm i -D weapp-tailwindcss

# 假如 tailwindcss 在 weapp-tailwindcss 之后安装，可以手动执行一下 patch 方法
# npx weapp-tw patch

然后把下列脚本，添加进你的 package.json 的 scripts 字段里:

json 复制代码

 "scripts": {
   "postinstall": "weapp-tw patch"
 }

添加tailwind.config.js文件：

js 复制代码

const path = require("path");

const resolve = (p) => {
  return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {
  // 注意此处，一定要 `path.resolve` 一下, 传入绝对路径
  // 你要有其他目录，比如 components，也必须在这里，添加一下
  content: ["./index.html", "./pages/**/*.{html,js,ts,jsx,tsx,vue}"].map(resolve),
  // ...
  corePlugins: {
    // 跨多端可以 h5 开启，小程序关闭
    preflight: false,
  },
};

vite.config.js 中注册windicss

js 复制代码

import path from "path";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import { UnifiedViteWeappTailwindcssPlugin as uvwt } from "weapp-tailwindcss/vite";
// 注意： 打包成 h5 和 app 都不需要开启插件配置
const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app";
const WeappTailwindcssDisabled = isH5 || isApp;

const resolve = (p) => {
  return path.resolve(__dirname, p);
};

export default defineConfig({
  plugins: [
    uni(), 
    uvwt({
      rem2rpx: true,
      disabled: WeappTailwindcssDisabled,
      // 由于 hbuilderx 会改变 process.cwd 所以这里必须传入当前目录的绝对路径
      tailwindcssBasedir: __dirname
    })
  ],
  css: {
    postcss: {
      plugins: [
        require("tailwindcss")({
          // 注意此处，手动传入你 `tailwind.config.js` 的绝对路径
          config: resolve("./tailwind.config.js"),
        }),
        require("autoprefixer"),
      ],
    },
  },
});

在app.vue的style中引入windicss

css 复制代码

  @import 'tailwindcss/base';
  @import 'tailwindcss/utilities';

vite整合windicss

shell 复制代码

npm i -D vite-plugin-windicss windicss

引入插件

js 复制代码

import vue from '@vitejs/plugin-vue'

import createAutoImport from './auto-import'
import createSvgIcon from './svg-icon'
import createCompression from './compression'
import createSetupExtend from './setup-extend'
import WindiCSS from 'vite-plugin-windicss'

export default function createVitePlugins(viteEnv, isBuild = false) {
    const vitePlugins = [vue()]
    vitePlugins.push(createAutoImport())
	vitePlugins.push(createSetupExtend())
    vitePlugins.push(createSvgIcon(isBuild))
    vitePlugins.push(WindiCSS())
	isBuild && vitePlugins.push(...createCompression(viteEnv))
    return vitePlugins
}