Vite8+Tailwindcss3 生产环境样式失效问题
发表于|更新于|前端
|总字数:92|阅读时长:1分钟|浏览量:
场景
Vite:8.0.10Tailwindcss:3.4.19浏览器:Google Chrome 89
问题描述
- 样式在开发环境下正常,生产环境下样式
媒体查询失效。
解决方案
在
vite.config.ts文件中不压缩CSS,即设置build.cssMinify为false1
2
3
4
5export default defineConfig({
build: {
cssMinify: false,
},
});使用官方推荐的
PostCSS插件cssnano来压缩CSS,详情
文章作者: Mr.XiaoSi
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 小四先生的云!
相关推荐

2025-08-03
Qiankun 常见问题
Qiankun-Vite 插件 Qiankun 默认不能接入 Vite ,需要使用 vite-plugin-qiankun 插件,但是这个插件目前不支持 Qiankun的样式隔离 和 React的热更新 使用 vite-plugin-qiankun 插件,可以配合浏览器插件 React Developer Tools 实现热更新 推荐使用 vite-plugin-qiankun-lite 插件,解决了上面的问题,并且简化了配置 Node 版本问题 Node 16 使用 vite-plugin-qiankun 插件启动时会报错 ReferenceError: ReadableStream is not defined,需要更改 cheerio 的版本(注意不要带 ^ 符号),详见:cheerio upgrade problem 123"devDependencies": { "cheerio": "1.0.0-rc.12"} Node 16 使用 Vite 时,也需要更改版本(其他版本也可自...
2024-11-28
Qiankun + Vite 样式隔离解决方案
问题 Qiankun + Vite 作为子应用时,样式隔离无效,即使配置了 experimentalStyleIsolation: true 也无效 Ant Design 组件库样式隔离无效 解决方案 使用 Postcss-Prefix-Selector 插件为样式添加前缀 Ant Design ConfigProvider 配置 prefixCls 样式前缀 配置插件样式隔离 在子应用 vite.config.ts 中配置 postcss-prefix-selector 插件(官方示例) 1234567891011121314151617181920212223242526272829303132import prefixer from 'postcss-prefix-selector';export default defineConfig({ css: { postcss: { plugins: [ prefixer({ prefix: '[d...

2025-11-30
微前端SDK@0.5
路线规划 规划图地址 更多详情 快速开始1234# 安装 @zxiaosi/sdk 对应的版本 0.5.xnpm install -g @zxiaosi/create-sdknpx create-sdk 提示 所有模板都排除了 react-dom,这将导致 HMR 失败。请安装 React 开发者工具. 项目介绍 整个 SDK 都是围绕 getRoutesApi、getUserInfoApi 这两个接口进行设计的,旨在简化微前端应用的开发 getRoutesApi 接口用于获取应用路由信息,包括主应用和微应用的路由配置。因为 Qiankun 的 entry 配置比较特殊,所以 主应用 需要使用 vite-plugin-mock 插件 mock 接口 在本地开发是本地服务 "entry": "http://localhost:5174" 在生产环境是文件路径 "entry": "/subapp/" getUserInfoApi 接口用于获取用户相关数据,以便进行权限控制和个性化设置。...

2025-09-25
Vite 模板语法
场景 当一套代码,需要发布到两个环境( A环境 和 B环境 )中时,A环境 下需要系统管理页面,B环境 下不需要系统管理页面。这时,我们可以通过后端返回的菜单控制。 但是如果 A环境 和 B环境 的登录页面也不一样呢?这时,我们就可能需要模板语法来控制。 需要自定义一个 vite 插件,在打包前,读取环境变量,然后使用 blueimp-tmpl 的模板语法对代码进行判断并替换。 项目地址实践安装依赖 blueimp-tmpl 模板语法 1npm install blueimp-tmpl cross-env 跨环境执行命令 1npm install cross-env -D 获取环境变量 在 package.json 文件中添加 scripts 脚本 12345678"scripts": { "dev": "npm run dev:A", "dev:A": "cross-env platform=A vite", "dev:B": &q...

2025-10-23
前端监控方案
常见监控方案 Sentry:一个开源的、实时的错误监控平台。功能全面、一站式解决方案、多端支持。强烈推荐!!! Web-See:前端监控 SDK,可用来收集代码报错、性能数据、页面录屏、用户行为、白屏检测等个性化指标数据并上报。支持多种错误还原方式:定位源码、播放录屏、记录用户行为 WebTracing:一个基于 JavaScript 的埋点 SDK。为你的前端项目提供【 行为、性能、异常、请求、资源、路由、曝光、录屏 】监控手段 演示地址项目实践思路 优先看 Web-See 文档 使用 Vite + React 创建项目,复刻 Web-See-Vue-Demo 不上报错误,把报错信息存储到 IndexDB 中,通过 idb-keyval 操作 IndexDB 线上出现问题时,下载 IndexDB 中的数据,在后台管理平台中导入并查看问题 项目介绍 从 项目地址 拉取示例代码,通过 pnpm install 安装依赖 核心文件是 src/monitor,里面封装了写入数据到 IndexDB 的方法,以及下载数据到本地的方法 由于 IndexDB 存储数据大小...

2024-12-19
模块联邦 (Vite)
模块联邦 什么是模块联邦?模块联邦是 Webpack 5 的新特性,它允许不同的应用或组件之间进行动态的模块共享。 为什么要使用模块联邦?模块联邦可以解决多个应用或组件之间的依赖问题,避免重复安装依赖,提高开发效率。 Webpack Module Federation 项目地址项目目录123456789101112131415161718├── 根目录 ├── packages ├── host # host 项目 ├── src ├── App.tsx ├── vite-env.d.ts ├── vite.config.ts ├── remote # remote 项目 ├── src ├── components ├── CustomButton ├── index.tsx ├── index.ts ├── App.tsx ├── ...
评论
公告
由于个人能力和知识范围有限,如果文章中出现了错误,还请您谅解。


