火狐浏览器使用scss嵌套编写css无法识别问题

最新推荐文章于 2024-07-24 11:39:30 发布
最新推荐文章于 2024-07-24 11:39:30 发布
阅读量550 收藏
点赞数
文章标签： css scss 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54259790/article/details/132574979
版权
火狐浏览器使用scss嵌套编写css无法识别问题
  1. 版本：
    “node-sass”: “^4.14.1”,
    “sass-loader”: “^7.3.1”,
  2. vue版本： v2
  3. 问题描述：
    我的文件目录是这样的：
    在这里插入图片描述
    而在scss文件中我是这样书写的
    在这里插入图片描述
    .vue文件中
    在这里插入图片描述

在火狐浏览器中
在这里插入图片描述
在谷歌浏览器中
在这里插入图片描述
初步排查发现嵌套结构的scss在火狐浏览器中没有相应的css样式，而在谷歌中没有出现相同的问题。
再次想问下大家为什么会发生这样的问题以及解决方案

刘建状
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
火狐浏览器CSS兼容的解决方法(部分)
xiang37的专栏
11-11 549
1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div...
针对火狐的CSS样式设置
Nana_9457的博客
03-13 5665
在工作中发现，有些效果在chrome浏览器中能实现的效果，在火狐下没有，比如截几行，在chrome下通过下述代码实现： display: -webkit-box; overflow: hidden; /*text-overflow: ellipsis;*/ -webkit-line-clamp: 2; -webkit-box-orient: vertical; 网上的一种方法已经失效： @-mo...
FireFox浏览器下，css文件失效问题
Cicadazz的博客
11-04 609
FireFox浏览器下，ccs文件失效问题 软件版本：WebStorm 2020.2.3 x64 FireFox使用外部引入css文件时，出现css文件失效的现象 使用Chrome浏览器一切正常 在网上查了一圈资料，改了浏览器设置、编码方式都无效 最后发现是因为css文件命名问题 css失效时的link标签 <link rel="stylesheet" type="text/css" href="css/wjwdrr.css"> css文件名处报Typo的问题，一开始没管，后来改为正常的单词命
scss或less嵌套写法样式不生效问题
Lrn的博客
12-04 4464
一般我们在写项目时，不管是原生的css去写还是通过less/sass预处理器去处理，都习惯性的根据不同的功能模块等去对应相应的样式文件，最后统一在一个地方引入，例如： common.scss文件 @import './reset.scss'; @import './header.scss'; @import './nav.scss'; @import './login.scss';/*登录*/ @import './systemuser.scss'; /* 用户管理*/ 最后在app.vue文件中.
关于css媒体查询不起作用的解决方法
nuanpang的博客
06-03 5033
1、关于媒体查询：在网页制作中，利用@media screen实现网页布局的自适应，匹配不同访问设备。这样无需插件和独立的手机主题，对移动设备友好，能够适应各种窗口大小。2、可能的原因：（1）首先确认是不是css本身的问题，而不是媒体查询没有生效。 比如 div{display:flex;} 如果写入了此代码，那么div所有的display效果都将无法生效； （2）格式书写错误and后面必须有空格，例如下面代码： /*屏幕小于640px时的样式*/ @media screen and (max-width:
关于CSS选择器书写正确浏览器却不认的一个原因
https://syra-ti.icu
03-26 476
不想看原因的，可以直接跳到页尾看解决方案 今天在写样式的时候出现不生效的问题，选择器是正确的，使用jquery也能正常选择到，但是浏览器就是不识别这一段样式。 问题样式 ↓ jQuery能选择到 ↓ 然而Chrome的开发者工具里面根本没有出现这一行 ↓ 排查到最后尝试删除了选择器末尾的空格，发现居然神奇的被识别了。。。。 删除末尾空格 ↓ 识别成功 ↓ 问题是解决了，但是奇了怪...
关于firefox不兼容DIV嵌套的问题
lqc851011的专栏
01-22 1165
FF里，要在外层的div里放float:left和float:right的div，需要设置外层div的高度。 你可以试一下： DIV1 DIV2 在IE里正常，在FF里，不会有红色背景，也就是外层div没有被撑开。 DIV1 DIV2 这样就正常了。 最好外层和里层的DIV都定义高度和宽度。这样不太容易出现问题。 如果实在是外层DIV不能确定高度，那么定义一个CSS类： .box:afte
sass嵌套CSS 规则;
最自由的笑的博客
08-20 5286
css中重复写选择器是非常恼人的。但在Sass中，你可以在规则块中嵌套规则块。如： #content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE } } /* 编译后 */ #content article h1 { color: #
vue 全局scss谷歌浏览器不生效 其他浏览器生效
@you的博客
12-23 969
最新的谷歌浏览器，在main.js引入的全局scss文件不生效了，原因竟然是我在全局样式中加了/deep/ 解决方式：去掉deep就生效了 注：不是全局的样式依然要加/deep/才行
postcss-scss:PostCSS的SCSS解析器
05-07
例如，您可以使用SCSS源进行，而将自动修复源中的问题。 // postcss.config.js module . exports = { syntax : 'postcss-scss' , plugins : { … } } 2. PostCSS的内联注释 您也可以使用此解析器仅向PostCSS项
vue中使用css预处理器scss解决body隐藏滚动条问题
02-22
主要就是用了css的伪类元素::-webkit-scrollbar和本身盒子的overflow属性来进行控制，但是会出现一个问题，其余属性（例如：-mz- 、 scroll-width）主要是为了适配主流浏览器下均不出现滚动条。设置好就完成了。
css — > 使用scss生成常用的基本css样式
01-08
【CSS使用SCSS生成基本样式】 SCSS（Sassy CSS）是一种预处理器语言，它扩展了CSS，增加了变量、嵌套规则、混合、函数等特性，使得编写和管理CSS更加方便。在Web开发中，我们可以利用SCSS来创建常用的、可复用的样式...
postcss-less2scss:PostCSS插件将Less转换为Scss
05-17
PostCSS Less2ssss 插件可将Less转换为SCSS。 转换变量 概述 变量-任何规则之外的声明 较少的： @link-color : #428bca ; Scss： $link-color : #428bca ; 变量-嵌套规则中的声明 较少的： #main { @width...
CSS 创建：从入门到精通
wjs2024的博客
07-24 423
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
CSS实现表格无限轮播
最新发布
像鱼的博客
07-24 286
在React中，用CSS实现表格无线轮播
CSS全部标签属性重置语法
爱酷码的博客
07-24 264
每个浏览器默认的属性不同，像谷歌浏览器不设置的话，默认每个元素是有外边距margin的，有的浏览器列表还会带上序号，有的浏览器就没有。所以为了让所有浏览器都一致，在写CSS开始前，我们都需要用CSS把全部标签属性重置一次，艾米自用的重置CSS代码分享给大家。
Web开发：图片九宫格与非九宫格动态切换效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-20 1109
本文主要记录图片九宫格与非九宫格展示效果动态切换的实现过程；
SCSS的基本用法
qq_32907491的博客
08-13 1847
声明变量的符号 $下面这张图左半部分是scss的语法，右半部分是编译后的css。（整篇文章皆是如此）
css的格式如何用scss编写
06-08
SCSS 是 CSS 的一种扩展语言，它在语法上与 CSS 相似，但提供了更多的功能和灵活性。下面是一些用 SCSS 编写 CSS 格式的示例： 1. 使用变量： ``` $primary-color: #007bff; .btn { color: $primary-color; border: 1px solid $primary-color; } ``` 2. 使用嵌套规则： ``` .card { background: #fff; padding: 10px; border: 1px solid #ccc; h3 { font-size: 16px; margin-bottom: 10px; } p { font-size: 14px; line-height: 1.5; } } ``` 3. 使用 mixin： ``` @mixin flex-center { display: flex; justify-content: center; align-items: center; } .container { @include flex-center; height: 100vh; } ``` 4. 使用函数： ``` $base-font-size: 16px; body { font-size: $base-font-size; } h1 { font-size: $base-font-size * 2; } ``` 使用 SCSS 可以让 CSS 的编写更加方便和灵活。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值