Vue3+scss 组件内部使用全局样式不生效

最新推荐文章于 2024-07-26 15:29:05 发布
最新推荐文章于 2024-07-26 15:29:05 发布
阅读量2.5k 收藏
点赞数
分类专栏： scss VUE3 Vite 文章标签： scss vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Cxiaomu/article/details/132046657
版权

技术栈：Vue3+Vite+SCSS

全局配置了scss样式，部分组件内部使用全局样式不生效

遇到这个问题时，发现在views组件中使用的样式能生效，但是子组件内使用的就不能生效，通过控制台查看，class绑定上了，但是对应的css样式没找到。

global.scss

global.scss

子组件

子组件

渲染效果

渲染效果
最后，通过查找资料，发现，是因为没有触发相应的样式编译，导致。

解决方案1

在不生效的组件里面写一个样式，任何样式或者注释都可以，因为不写没触发编译（最优解）

解决方案2

父级样式去掉scope（有局限性，不适用所有场景）

Vue 组件样式作用域问题：原因与解决方案
zzjlhlcd的博客
03-19 510
Vue 组件样式的作用域问题主要源于全局样式与局部样式的冲突、scoped的限制以及样式加载顺序。通过合理使用、深度选择器、CSS Modules 和动态样式绑定，可以有效解决这些问题。希望本文的介绍能帮助你在 Vue 开发中更好地管理和优化组件样式。
WebPack 4 +TypeScript 3 +Vue 2.5+SCSS 简单环境搭建
学习就像吃饭一样,不可以太着急,否则就会咀嚼不完全,而不消化
08-13 3606
开发环境 VSCODE NPM包管理工具 环境 名称：node 版本:10.7.0 名称：npm 版本:6.1.0 名称：webpack 版本:4.16.5 名称：typescript 版本:3.0.1 名称：sass 版本:3.5.7 试验软件/包 名称：vue 版本:3.0.0-rc.11 名称：typescript 版本:3.0.1 安装步骤 项目...
Vue2及Vue3强制修改组件库样式的方法以及Vue3强制修改组件库样式不生效的原因？解决方案有哪些？
qq_47199913的博客
05-14 1774
Vue2的方案同样适用，只不过官方文档中并未提及/deep/，而是推荐使用:deep()的方法。>内使用 >>> 或 /deep/ ，建议用/deep/ ，避免>>>无法解析的问题。1）需要在组件上设置是否将 menu 的下拉列表插入至 body 元素。两个目录压根不在一个组件中，所以强制修改组件样式不生效。3. Vue3强制修改组件库样式不生效的原因？比如：menu组件的二级菜单。1. Vue2强制修改组件库样式的方法。2. Vue3强制修改组件库样式的方法。2）强制修改的组件样式没在当前组件内。
vue+webpack dev本地调试全局样式引用失效的解决方案
12-13
今天遇到了奇怪的问题，在main.js中引入全局样式，在组件中引用样式时，有些样式失效，有些样式生效。但是神奇的是build打包后样式是正常的。 注册两字没有变成红色。。刚开始以为是class名字命名冲突之类的，网上查了很多资料，有提到说css文件中写了中文注释引起的，试过了不行。后来把所有的样式删掉，只剩一个样式，就生效了。好了，罪魁祸首就是空格符。build打包时会有压缩，所以不会有这个问题。 进入【utils.js】,添加压缩就好了 const cssLoader = { loader: 'css-loader', options: { sourceMap: opti
vue3.0项目中全局注入scss样式不生效原因
XUELINGMM的博客
05-16 4923
原来这不是一个bug，只有在main.js引入一个其他scss文件或者在.vue文件中使用，并且里面有内容（猜测因为配置文件是在每个 vue 文件单独引入的原因），则 scss.additionalData 配置的全局scss文件就可以正确引入了
vue3全局组件中使用全局样式失效bug
仙途路漫漫其修远兮
07-13 1345
正常代码如下 HeaderSearch 组件 解决方案：
vite vue3 sass全局变量不起效
GIS小虫的博客
06-17 3655
RT
【已解决】Vue全局引入scss 个别页面不生效 / 不自动引入全局样式
bao
10-13 2149
Vue 全局引入 Scss 文件不生效
解决vue scoped scss 无效的问题
10-14
在Vue.js开发中，我们经常使用`scoped`属性来实现组件的样式隔离，确保组件的CSS样式只影响该组件本身，避免全局样式污染。然而，当遇到`scoped scss`无效的问题时，开发者可能会遇到一些困扰。本文将详细介绍如何...
在 vue-cli v3.0 中使用 SCSS/SASS的方法
08-27
如果你希望定义一下全局能够使用的 SCSS 样式，首先需要创建一个 SCSS 文件，然后在项目的 main.js 中使用 import 命令就像导入模块一样，将独立 SCSS 文件全局导入项目。例如：`import "./static/common.scss";` ...
使用 webpack 从0开始搭建的 vue3+sass+element-plus+typescript 项目
09-02
配置全局样式，确保Element-Plus的主题和组件样式生效。 7. **构建项目**：在`package.json`中添加`build`脚本，调用`webpack --mode production`进行生产环境的打包。在开发过程中，可以使用`webpack-dev-server`...
vue 组件中添加样式不生效的解决方法
08-27
主要介绍了vue 组件中添加样式不生效的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决vue加scoped后就无法修改vant的UI组件的样式问题
11-19
3. **`scoped`的影响**：理解`scoped`的作用，知道如何使用深度选择器（`/deep/`或`::v-deep`）来影响子组件的样式。 4. **iOS上的输入框放大**：在iOS设备上，输入框可能因缩放问题显得过大，可以通过设置`<meta>`...
修改组件样式不生效（vue深度选择器）
xccevol的博客
06-11 574
💡 这样会污染全局的样式，一般组件会给你提供一个属性，给弹窗加一个类。样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用。/deep/ 这种写法不支持sass预处理器，也不推荐使用。>>> 这种写法在浏览器兼容性问题，所以一般也不推荐使用。文件里面更改不生效，需要在全局样式里面更改才生效。有些像 Sass 之类的预处理器无法正确解析。::v-deep vue3弃用，也不推荐使用。没有选中，可以使用vue提供的深度选择器。深度选择器还有以下几种写法。
【SCSS】全局变量不生效问题； js 中使用 scss 变量问题(vue3 项目)
最新发布
汤一飞
07-26 904
【代码】【SCSS】全局变量不生效问题；js 中使用 scss 变量问题(vue3 项目)
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
热门推荐
赏樱看雪撸代码
12-01 1万+
vue项目部署CSS失效，css样式加载无效，nginx部署css失效，css文件404，服务器样式失效 部署项目css失效
CSS样式没有生效的常见原因
Keep trying, keep going
04-30 2220
如果你的样式文件仍然无法生效，请逐步排查上述可能的原因，并确保样式文件的正确性和适用范围。另外，使用浏览器的开发者工具可以帮助你检查样式是否应用成功，并查看样式规则和层叠顺序的情况。优先级不足：可能是样式文件的选择器优先级不足以覆盖目标元素的默认样式。可以通过使用开发者工具检查元素的样式并查看应用的样式规则，以确定是否存在样式冲突。样式代码错误：检查样式文件中的代码是否存在语法错误、拼写错误或其他问题，确保样式规则书写正确。样式层叠顺序：样式的层叠顺序可能导致你的自定义样式被其他样式覆盖。
解决vue3中设置的v-html的代码样式不生效的问题
时清云的博客
11-17 3331
在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被Vue 的模板编译器处理。如果你希望针对v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局。最近在做一个需求，遇到这样一个问题，接口返回的一段。这句话非常清楚地表明了没有生效的原因。内容的样式没有生效，这是什么情况？那我们怎么设置让它生效呢？渲染到页面的时候，发现在。
vue3 style 标签加 scoped 导致样式失效
weixin_43718297的博客
10-20 1146
vue3 style 标签加 scoped 导致样式失效
Vue scoped SCSS修复：使用/deep/解决样式失效问题
在Vue.js开发中，`scoped`属性通常用于限制样式仅在当前组件内部生效，以避免样式污染全局。然而，当尝试修改嵌套在其他组件（如框架或插件）中的元素样式时，由于Vue的`scoped`机制，这些样式可能不会如预期那样...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值