uniapp，vite整合windicss

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

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

复制代码

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

1. "scripts": {
2.    "postinstall": "weapp-tw patch"
3. }

复制代码

添加tailwind.config.js文件：

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

复制代码

vite.config.js 中注册windicss

1. import path from "path";
2. import { defineConfig } from "vite";
3. import uni from "@dcloudio/vite-plugin-uni";
4. import { UnifiedViteWeappTailwindcssPlugin as uvwt } from "weapp-tailwindcss/vite";
5. // 注意： 打包成 h5 和 app 都不需要开启插件配置
6. const isH5 = process.env.UNI_PLATFORM === "h5";
7. const isApp = process.env.UNI_PLATFORM === "app";
8. const WeappTailwindcssDisabled = isH5 || isApp;
10. const resolve = (p) => {
11.   return path.resolve(__dirname, p);
12. };
14. export default defineConfig({
15.   plugins: [
16.     uni(),
17.     uvwt({
18.       rem2rpx: true,
19.       disabled: WeappTailwindcssDisabled,
20.       // 由于 hbuilderx 会改变 process.cwd 所以这里必须传入当前目录的绝对路径
21.       tailwindcssBasedir: __dirname
22.     })
23.   ],
24.   css: {
25.     postcss: {
26.       plugins: [
27.         require("tailwindcss")({
28.           // 注意此处，手动传入你 `tailwind.config.js` 的绝对路径
29.           config: resolve("./tailwind.config.js"),
30.         }),
31.         require("autoprefixer"),
32.       ],
33.     },
34.   },
35. });

复制代码

在app.vue的style中引入windicss

1.   @import 'tailwindcss/base';
2.   @import 'tailwindcss/utilities';

复制代码

vite整合windicss

1. npm i -D vite-plugin-windicss windicss

复制代码

引入插件

1. import vue from '@vitejs/plugin-vue'
3. import createAutoImport from './auto-import'
4. import createSvgIcon from './svg-icon'
5. import createCompression from './compression'
6. import createSetupExtend from './setup-extend'
7. import WindiCSS from 'vite-plugin-windicss'
9. export default function createVitePlugins(viteEnv, isBuild = false) {
10.     const vitePlugins = [vue()]
11.     vitePlugins.push(createAutoImport())
12.         vitePlugins.push(createSetupExtend())
13.     vitePlugins.push(createSvgIcon(isBuild))
14.     vitePlugins.push(WindiCSS())
15.         isBuild && vitePlugins.push(...createCompression(viteEnv))
16.     return vitePlugins
17. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。