nextjs+antd静态导出发布之后antd的样式失效

苏苏味素素

已于 2024-05-17 15:12:37 修改

阅读量281

点赞数 9

文章标签：前端 javascript 开发语言前端框架

于 2024-05-17 15:10:16 首次发布

本文链接：https://blog.csdn.net/m0_45445193/article/details/139005186

版权

背景：使用nextjs和antd开发了一个系统，发布的时候采用的是静态导出再部署的方式，当使用cross-env NODE_ENV=test next build && next export 打包时可以成功加载测试环境的配置文件，但是发布之后页面上antd的样式失效了

原因以及解决方案：theme里有一个hashed属性，把hashed属性设置为false，再次打包发布，成功！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

苏苏味素素

关注关注

9
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
nextjs+antd静态导出发布之后antd的样式失效

属性，把hashed属性设置为false，再次打包发布，成功！
复制链接

扫一扫

ant-design-vue 4.x升级问题-样式丢失问题

前端

08-05

3533

该文档是在升级ant-design-vue到4.x版本的时候遇到的问题。

Next.js中使用styled-components刷新页面样式消失

weixin_45979181的博客

07-31

1721

在Next.js中，使用styled-component进行样式设置，在初始化页面时样式显示完整，当对无更新页面再次进行手动刷新时，样式消失并出现如下警告：解决办法 1、安装 babel-plugin-styled-components npm install babel-plugin-styled-components -S 2、配置在项目根目录下创建一个 .babel 文件，并进行以下配置 { "presets": ["next/babel"], "plugins": [ [

2 条评论您还未登录，请先登录后发表或查看评论

使用 NextUI 样式失效的问题及解决方法

Typhoon0906的博客

07-05

215

本文记录了使用 NextUI 框架时出现的样式失效问题及其解决方法。

React Next.js antd 首屏闪烁,样式不稳定的bug

未将对象引用设置到对象的实例

03-14

3262

说明 Next.js + Ant Design 的html渲染后, 各种css样式会经历从无到有的一个过程. 造成了闪烁的感觉, 体验很差. 解决方案 https://github.com/ant-design/ant-design/issues/16037

React Next.js项目中Ant Design与Tailwind CSS样式冲突问题

weixin_68615235的博客

02-07

600

新开了一个同时安装tailwind和antd的next.js项目，发现运行起来时部分组件会产生样式冲突，例如antd Button，在使用过程中按钮颜色默认为透明。

nextjs-antd-github问题博客：博客项目，基于Nextjs + Antd + GitHub api + now.sh

02-04

Nextjs-Antd-Github问题博客关于这个项目如你所见，一个博客项目，做这个项目本意是想拥有一个博客用于记录本人生活工作中的一些事情 :warning_selector:注意，不支持IE浏览器点这里看一下：这个项目有什么特别...

Nobibi：一个简单开放的Java社区（Nextjs + Antd + Koa2 +猫鼬）

02-04

诺比比简体中文| Nobibi是一种轻量级开源社区，快速建造属于自己的社区已更新问ts版本，原js版本请访问： : 关于诺比Nobibi是一种轻量级开源社区，包含前后台前台考虑SEO使用 + antd服务端渲染结构后台系统基于 ...

nextjs-antd-admin:使用Next.js（SSR React），Ant Design和样式化组件的多功能综合管理仪表板

05-02

该应用程序是使用Next.js（SSR React），Ant Design和用于前端的样式化组件构建的；后端使用Typescript Node.js，PostgreSQL，Auth0（身份验证）和AWS S3（云存储）。在签出移动应用程序（使用React Native和...

vue3+vite+antd 后台管理系统基础模板

02-06

这个"vue3+vite+antd 后台管理系统基础模板"是一个用于快速搭建后台管理系统的项目起点。它集成了Vue3的最新特性、Vite的高效开发环境以及Antd的UI组件，为开发者提供了一个稳定且高效的开发平台。 `.env....

基于umi+antd-mobile的移动端项目模板

02-22

"基于umi+antd-mobile的移动端项目模板"是一个针对移动端应用开发的高效解决方案，它结合了两个强大的工具：umi框架和antd-mobile组件库。这个模板提供了一个快速启动的项目结构，旨在帮助开发者更高效地构建高质量...

nextAntDIssue：这只是切换页面时的问题演示。 1-如果页面没有CSS，而其他页面没有，则下一个链接不起作用，解决方法是在每个页面（_app.js）上手动导入一些CSS文件。 2-转到主页，重新启动开发服务器，在浏览器上重新加载页面，单击“第二”，页面将被加载样式损坏

02-18

蚂蚁设计实例这个例子展示了如何将Next.js和一起使用。这旨在显示此UI工具包与Framework的集成。自己部署使用部署示例：如何使用使用create-next-app 使用或执行以引导示例： npm init next-app --example with-ant-design-less with-ant-design-app # or yarn create next-app --example with-ant-design-less with-ant-design-app 手动下载下载示例： curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-ant-design-less cd with-an

NextJs - SSR渲染解决antd首屏加载CSS样式的闪烁问题

最新发布

Zong_0915的博客

07-07

425

NextJs - SSR渲染解决antd首屏加载CSS样式的闪烁问题

Next.js踩坑入门系列（二）— 添加Antd && CSS

weixin_34405925的博客

08-30

1202

Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 (四) Next.js中期填坑 (五) 引入状态管理Redux (六) 再次重构目录 (七) 其他相关知识个人对于脚手架的UI有一种执念，如果搭建出来就是一个首页＋a标签跳转，实在不是我这个处女座的风格，因此第二步我就想引用UI框架...

next.js 引入antd

qq_37942845的博客

05-08

2191

yarn add @zeit/next-css antd babel-plugin-import 根目录新建.babelrc { "presets": [ "next/babel" ], "plugins": [ [ "import", { "libra...

nextJS集成antd

weixin_44677431的博客

05-19

2247

nextjs 默认不支持css文件的问题解决解决方法：修改nextjs的默认配置，使用@zeit/next-css插件第一步：安装 npm i @zeit/next-css -s 第二步：创建next.config.js，并写配置 // 让nextjs支持css的配置 const withCss = require('@zeit/next-css') if (typeof require !=...

NextJS-集成antd

CrystalLee

09-17

2353

nextJS 版本： 9.5.3 方法一：使用CSS加载第一步：添加相应组件 yarn add antd babel-plugin-import 第二步新建.babelrc 文件 { "presets": ["next/babel"], "plugins": [ [ "import", { "libraryName": "antd" } ] ] } 第三步 _app.js 文件中引入antd样式文件 import.

next.js中antd引入以及按需加载

祥哥的说

10-27

6569

babel: babel是一种js语法编译器，在前端开发过程中，由于浏览器的版本和兼容性问题，很多js的新方法和特性的使用都受到了限制。使用babel可以将代码中js代码编译成兼容绝大多数主流浏览器的代码。简而言之，就是把不兼容的 JavaScript 代码转为可兼容，可以执行的 JavaScript 代码。功能：语法转换　　添加一些兼容性的 polyfill 功能　　源码转换等 (1) presets ：是某一类 plugin 的集合，包含了某一类插件的所有功能。 (2) plugin

Next.js中使用antd修改其组件的默认样式

Mqyyy的博客

08-18

1578

Next.js中使用antd修改其组件的默认样式

next.js 集成antd 小结

前端小愤青

08-12

1432

开篇关于next集成Ant Design,网上方案不全也有可能由于next升级导致不能使用，在这里推荐next官方demo案例，如果你想直接使用则下载demo即可，下面是我在摸索中的一些总结。集成 import style files 首先无论你引入那种UI，在next中是不支持加载.css、.scss、.less文件,下面采用官方方案，以css为例: npm install --save ...

react+antd导出后端传入的二进制流文件内容为[object file]

09-06

在使用React Antd进行开发时，如果需要导出后端传入的二进制流文件内容，常常会遇到显示[object file]的情况。原因是React Antd默认将文件对象转换为字符串，并显示为[object file]。为了解决这个问题，我们需要进行...