uniapp,vite整合windicss

2024-09-08 08:12

本文主要是介绍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
}

这篇关于uniapp,vite整合windicss的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1147583

相关文章

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

css实现图片旋转功能

《css实现图片旋转功能》:本文主要介绍了四种CSS变换效果:图片旋转90度、水平翻转、垂直翻转,并附带了相应的代码示例,详细内容请阅读本文,希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo

Spring Boot 整合 ShedLock 处理定时任务重复执行的问题小结

《SpringBoot整合ShedLock处理定时任务重复执行的问题小结》ShedLock是解决分布式系统中定时任务重复执行问题的Java库,通过在数据库中加锁,确保只有一个节点在指定时间执行... 目录前言什么是 ShedLock?ShedLock 的工作原理:定时任务重复执行China编程的问题使用 Shed

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

详解如何在React中执行条件渲染

《详解如何在React中执行条件渲染》在现代Web开发中,React作为一种流行的JavaScript库,为开发者提供了一种高效构建用户界面的方式,条件渲染是React中的一个关键概念,本文将深入探讨... 目录引言什么是条件渲染?基础示例使用逻辑与运算符(&&)使用条件语句列表中的条件渲染总结引言在现代

详解Vue如何使用xlsx库导出Excel文件

《详解Vue如何使用xlsx库导出Excel文件》第三方库xlsx提供了强大的功能来处理Excel文件,它可以简化导出Excel文件这个过程,本文将为大家详细介绍一下它的具体使用,需要的小伙伴可以了解... 目录1. 安装依赖2. 创建vue组件3. 解释代码在Vue.js项目中导出Excel文件,使用第三

Java实现Excel与HTML互转

《Java实现Excel与HTML互转》Excel是一种电子表格格式,而HTM则是一种用于创建网页的标记语言,虽然两者在用途上存在差异,但有时我们需要将数据从一种格式转换为另一种格式,下面我们就来看看... Excel是一种电子表格格式,广泛用于数据处理和分析,而HTM则是一种用于创建网页的标记语言。虽然两

SpringBoot 整合 Grizzly的过程

《SpringBoot整合Grizzly的过程》Grizzly是一个高性能的、异步的、非阻塞的HTTP服务器框架,它可以与SpringBoot一起提供比传统的Tomcat或Jet... 目录为什么选择 Grizzly?Spring Boot + Grizzly 整合的优势添加依赖自定义 Grizzly 作为

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言