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

最新推荐文章于 2024-07-25 10:45:42 发布
最新推荐文章于 2024-07-25 10:45:42 发布
阅读量548 收藏
点赞数
文章标签： 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
    评论
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）主要是为了适配主流浏览器下均不出现滚动条。设置好就完成了。
scss或less嵌套写法样式不生效问题
Lrn的博客
12-04 4459
一般我们在写项目时，不管是原生的css去写还是通过less/sass预处理器去处理，都习惯性的根据不同的功能模块等去对应相应的样式文件，最后统一在一个地方引入，例如： common.scss文件 @import './reset.scss'; @import './header.scss'; @import './nav.scss'; @import './login.scss';/*登录*/ @import './systemuser.scss'; /* 用户管理*/ 最后在app.vue文件中.
针对火狐的CSS样式设置
Nana_9457的博客
03-13 5660
在工作中发现，有些效果在chrome浏览器中能实现的效果，在火狐下没有，比如截几行，在chrome下通过下述代码实现： display: -webkit-box; overflow: hidden; /*text-overflow: ellipsis;*/ -webkit-line-clamp: 2; -webkit-box-orient: vertical; 网上的一种方法已经失效： @-mo...
火狐浏览器CSS兼容的解决方法(部分)
xiang37的专栏
11-11 546
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...
FireFox浏览器下，css文件失效问题
Cicadazz的博客
11-04 607
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的问题，一开始没管，后来改为正常的单词命
关于css媒体查询不起作用的解决方法
nuanpang的博客
06-03 5030
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 474
不想看原因的，可以直接跳到页尾看解决方案 今天在写样式的时候出现不生效的问题，选择器是正确的，使用jquery也能正常选择到，但是浏览器就是不识别这一段样式。 问题样式 ↓ jQuery能选择到 ↓ 然而Chrome的开发者工具里面根本没有出现这一行 ↓ 排查到最后尝试删除了选择器末尾的空格，发现居然神奇的被识别了。。。。 删除末尾空格 ↓ 识别成功 ↓ 问题是解决了，但是奇了怪...
关于firefox不兼容DIV嵌套的问题
lqc851011的专栏
01-22 1163
FF里，要在外层的div里放float:left和float:right的div，需要设置外层div的高度。 你可以试一下： DIV1 DIV2 在IE里正常，在FF里，不会有红色背景，也就是外层div没有被撑开。 DIV1 DIV2 这样就正常了。 最好外层和里层的DIV都定义高度和宽度。这样不太容易出现问题。 如果实在是外层DIV不能确定高度，那么定义一个CSS类： .box:afte
sass嵌套CSS 规则;
最自由的笑的博客
08-20 5283
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 967
最新的谷歌浏览器，在main.js引入的全局scss文件不生效了，原因竟然是我在全局样式中加了/deep/ 解决方式：去掉deep就生效了 注：不是全局的样式依然要加/deep/才行
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实现从上往下过渡效果
Rverdoser的博客
07-18 360
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
flex：1
最新发布
m0_47999208的博客
07-25 269
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
css性能优化的方法
jht_520的博客
07-21 371
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
css 作业 2
没有 bug 的代码是不完美的！
07-25 500
写完了
CSS相关记录
oThrowsException的博客
07-24 628
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
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、付费专栏及课程。

余额充值