解决nuxt3环境中css样式失效的问题

最新推荐文章于 2024-03-10 11:29:41 发布
最新推荐文章于 2024-03-10 11:29:41 发布
阅读量878 收藏 11
点赞数 8
文章标签： nuxt3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaohuizhuang6019/article/details/135026134
版权

现象:  底部播放器进度条拖动按钮没有了！

 然后通过chrome开发工具检查html元素的结构：

 发现progressbar这个元素是存在的，但是为什么没有显示呢，然后回到代码中：

发现原来是组件的名字写错了，多写了一个字母n.

最后总结：　nuxt3虽然不要求手动导入组件，但是如果在html标签在写错了组件名称，

也会导致html元素丢失或者css样式失效！

kingtopest
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nuxt框架中样式不生效的bug以及解决办法
weixin_44812997的博客
08-06 3009
前言 兄弟们好久不见，没想到吧，我胡汉三又回来了，最近一段时间忙于暑期实习上的工作，遇到了很多很想记录下来的问题，但是一直没什么时间，今天终于给我逮到机会了，我先来分享一下在最近工作中遇到的一个很罕见的bug（至少我是这么认为），ok，同样的，我依旧会深入浅出，先简单介绍一些bug生成的环境以及解决bug必须掌握的知识。 认识一下nuxt.js 在这次的项目中，甲方要求我们用服务端渲染数据到页面上，方便后期爬虫爬数据，那么我的老前辈就直接让我使用这个nuxt框架，**Nuxt.js 是一个基于Vue.js的
html引入vue无显示,Ant Design Vue引入Form组件样式不显示的解决方法
weixin_39850599的博客
06-18 2550
使用 vue-cli 安装 Ant Design Vue的 Form 组件，发现不能用，组件样式不显示。此处省略了安装和初始化的步骤，需要的点击上方链接，直接在 Ant Design 官网查看教程。在 main.js 中全局引入：import{Form,Input,Select}from'ant-design-vue';因为我进行了按需加载组件代码的配置，所以只需要上面一行就可...
CSS样式不生效错误排查
热门推荐
haishangfeie的博客
09-10 3万+
标签： CSS 不生效 前端在写页面时，有时会发现自己写的样式无法生效，由于缺乏经验，排查以来耗时耗力，最终可能发现只是由于自己一个小小的失误导致，于是便萌生结合网上的一些经验，写一篇CSS样式不生效的文章，希望能给一些初涉此道的朋友一些帮助。排查步骤首先，先试一下清除缓存，重启浏览器等手段，无效后再进行进一步排查。 接着按以下流程排查： 以下是排查以及修改方法： 再次提醒在排查前先试一下清除
NUXT踩坑—CSS消失
qq_42201962的博客
11-06 2750
NUXT踩坑首屏CSS样式不生效，图片缺失发现问题及解决办法 首屏CSS样式不生效，图片缺失 本地运行没有问题，但是部署之后会发现，首页的格式发生了变化，部分CSS未生效，部分组件缺失。其他页面都正常，并且从其他页面跳转过来都是正常的 如下图： 下面的页面是正常的： 发现问题及解决办法 首页的部分样式是生效的，部分却没生效。仔细观察发现没有生效的部分都采用了组件引入的方式，为什么引入的组件样式却没有被引入呢？ 原来是因为，我将组件引入写在了nuxt.config.js里面： plugins: [
nuxt中使用字体图标，解决第一次可以加载出来，刷新页面图标消失的问题
小多的博客
08-05 421
排除相对路径问题 使用
解决【深度修改组件样式不生效】问题
最新发布
qq_63943166的博客
03-10 360
引入某些组件库，在子组件中修改样式，但是却不生效，这是为什么呢。
Nuxt3 整合 naiveUI button 样式异常解决
梦染 * 星尘 的博客
10-15 408
这是因为 naiveUI 和 tailwindCss 的样式产生冲突，给 tailwindCSS 设置禁止预加载即可。
Nuxt3 Vite在全局引入css文件后 页面有大量内联style的真正解决办法
qq_37436987的博客
09-16 1410
Nuxt3 Vite在全局引入css文件后 页面有大量内联style的真正解决办法。
nuxt-breaky:在开发过程中在Nuxtjs中显示您的Tailwind CSS断点
03-21
使用tailwindcss 时，在Nuxtjs中显示Tailwind CSS断点 介绍 breaky可帮助您更快地创建响应式设计。它扩展了真棒的 。 breaky在您的顺风配置中读取您定义的断点，并根据您的浏览器窗口宽度显示当前活动的断点。 该...
tailwindcss-module:Nuxt 的 Tailwind CSS 模块
08-03
将@nuxtjs/tailwindcss依赖项添加到您的项目中 # Using npm npm install --save-dev @nuxtjs/tailwindcss # Using yarn yarn add --dev @nuxtjs/tailwindcss 添加@nuxtjs/tailwindcss到buildModules的部分nuxt.con
nuxt案例全局CSS丢失的那部分样式hover.css
10-29
最近在学nuxt 然后边看案例边敲代码,结果发现nuxt官方案例有个Bug 在 CSS全局案例那里，少给了一个样式 hover.css,来吧，我做个雷锋，拿去吧
解决Nuxt使用axios跨域问题
01-19
本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。 解决跨域 Nuxt 使用 axios 为避免出现前端页面跨域问题，需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块。 用 yarn 安装： yarn add axios @...
nuxt-purgecss：删除多余CSS！ Nuxt.js的简洁PurgeCSS包装器
02-06
Nuxt PurgeCSS-删除多余CSS！ 产品特点 轻松删除不需要CSS Webpack或PostCSS模式 已经带有强大的默认设置 建立在 Nuxt 2（仅Nuxt 2）支持 经过全面测试！ 建立 将nuxt-purgecss依赖项添加到您的项目中 yarn add -...
Vue3+Nuxt3实战在线教育SSR网站
03-24
Vue3+Nuxt3实战在线教育SSR网站基于Nuxt3搭建的页面
Nuxt3+Naive-ui组件样式修改
qq_38661597的博客
06-13 1427
naive-ui的样式重置，覆盖，我开始像使用其他ui框架一下在css里使用v-deep不起作用，官网供的n-config-provider来自己设置样式。
Nuxt3遇见的坑（四）：图片动态渲染之后打包路径问题以及打包css样式问题
weixin_43160498的博客
12-26 4150
nuxt3 动态渲染图片打包路径问题以及打包css路径
Nuxt脚手架创建项目后无法使用sass的解决方法
weixin_43964148的博客
01-30 690
安装 . 这两个哦。
高效地将 TailwindCSS 与 Nuxt 结合使用
qq_37116560的博客
06-25 773
在这篇文章中，我们将了解如何在 TailwindCSS 的官方 Nuxt 模块的帮助下有效地将 TailwindCSS 与 Nuxt 应用程序结合使用。我们还将了解如何将 SVG 图标与 TailwindCSS 一起使用，而不是直接使用图像或 SVG 图标，以及如何基于给定图像为 TailwinCSS 构建自定义调色板。 先决条件 最好使用以下命令设置 Nuxt 应用程序并准备好运行： ...
Nuxt3框架局部文件引用外部JS/CSS文件的相关配置方法
qq_44776454的博客
11-17 1655
Nuxt3框架布局文件引用外部JS/CSS文件的相关配置方法
nuxt3 如何引入wow.js
06-09
要在Nuxt 3中引入wow.js，可以按照以下步骤操作： 1. 安装wow.js和animate.css 可以使用npm或yarn安装wow.js和animate.css： ``` npm install wowjs animate.css ``` 或 ``` yarn add wowjs animate.css ``` 2. 创建一个插件文件 在Nuxt 3中，可以使用插件文件来引入第三方库。创建一个新的文件`wow.js`，并将以下代码添加到文件中： ``` import { createApp } from 'vue' import WOW from 'wowjs' export default function (context, inject) { const app = createApp() app.directive('wow', WOW.wow) inject('wow', WOW) } ``` 在这个插件文件中，我们首先使用`createApp`函数创建一个Vue实例。然后，我们使用Vue的`directive`方法将WOW.js的指令`wow`添加到Vue的指令系统中。最后，我们使用Nuxt 3的`inject`方法将WOW.js注入到Nuxt 3应用程序中。 3. 在nuxt.config.js中引入插件 打开`nuxt.config.js`文件，在`plugins`数组中添加以下代码： ``` { src: '~/plugins/wow.js', mode: 'client' } ``` 这将在客户端模式下引入插件。 4. 在组件中使用WOW.js 现在，您可以在组件中使用WOW.js了。在需要使用WOW.js的组件中，您可以按照以下步骤操作： 首先，使用`this.$wow.init()`方法初始化WOW.js： ``` export default { mounted() { this.$wow.init() } } ``` 然后，您可以在需要使用WOW.js的元素上添加`wow`指令： ``` <template> <div class="wow fadeIn" v-wow> ... </div> </template> ``` 现在，当这个组件被挂载时，WOW.js将自动在带有`wow`指令的元素上应用动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值