uniapp，vite整合windicss

本文主要是介绍uniapp，vite整合windicss，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

安装：

npm i -D tailwindcss postcss autoprefixer
# 初始化 tailwind.config.js 文件
npx tailwindcss initnpm i -D weapp-tailwindcss# 假如 tailwindcss 在 weapp-tailwindcss 之后安装，可以手动执行一下 patch 方法
# npx weapp-tw patch

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

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

添加tailwind.config.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

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

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

vite整合windicss

npm i -D vite-plugin-windicss windicss

引入插件
在这里插入图片描述

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
}