解决vscode编译后scss文件中的-webkit-box-orient:vertical属性丢失问题

最新推荐文章于 2023-10-10 10:15:04 发布
最新推荐文章于 2023-10-10 10:15:04 发布
阅读量595 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/D505yjw/article/details/109355781
版权

平常对于文字的超出隐藏是自己封装的样式类
在这里插入图片描述
之前一直没发现，知道一个项目中发现设置了超出三行显示隐藏失效，最后发现scss编译过后的css文件中是没有-webkit-box-orient:vertical的。原来是autoprefixer把这个属性给自动删掉了，只需要通过以下注释就能解决这个问题
在这里插入图片描述

姚家威
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
详解VScode自动补全CSS3前缀插件以及配置无效的解决办法
10-15
主要介绍了详解VScode自动补全CSS3前缀插件以及配置无效的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
CSS 多行省略失效 (-webkit-box-orient 失效)
weixin_34228387的博客
06-06 835
背景scss文件中，设置多行省略（如下），代码未生效 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;复制代码现象代码未生效：查看style,-webkit-box-orien...
webpack升级后发现-webkit-box-orient 属性 丢失
最新发布
qq_46370075的博客
10-10 140
添加 /* autoprefixer: ignore next */ 注释 让autoprefixer不杀掉这个属性。如果使用 autoprefixer的块级注释， 会在编译时报警告。属性丢失 页面不报错，但是导致页面内容为空。属性丢失导致没有出现省略号。
vue打包后css里-webkit-前缀丢失
不知不觉 | 笔记
08-24 2496
步骤一：找到build/webpack.prod.conf.js，注释下面这一段 /* new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), */ 注...
解决Webpack打包时自动过滤-webkit-box-orient，导致属性不生效
m0_54281583的博客
07-27 347
使用文字超长自动显示省略号。本地运行测试完全没有问题，但是使用WebPack打包后，发布到服务器上，属性失效。debug查看，CSS中-webkit-box-orient:vertical消失了？？？？？？调查了很长时间，网上各种找攻略，都不好使。下面两种亲测根本不好用。编译的时候还是会自动过滤。而且第一种在vscode编译的时候，还会报警告。还有一种方式直接关闭autoprefixer: {remove: false}，不推荐！！！！使用内联样式，完美解决问题！！！！
VSCode-解决自动保存文件时删除最后一行空行的问题
种子不服古怪的博客
03-10 2190
问题描述 在写代码的时候,vscode自动把最后一行的空行给删除了, eslint疯狂报错,所以我搜索了一圈之后,设置vscode的什么insertFinalNewline都不起作用 解决方法 总有大牛帮我们造出了轮子 安装一个 final-newline 插件解决了问题 ...
vue-scss-variable-scan:让vscode在vue文件中提示scss自定义变量
04-29
vue-scss变量扫描这是一个扩展，允许vscode在Vue和Scss文件中提示SCSS的自定义变量。扩展设置有以下四个设置： vue-scss-variable-scan.globalPath ：SCSS扫描变量的路径（默认值：src / ** / *。scss） vue-scss-...
antd-scss-theme-plugin:一个Webpack插件，用于通过SCSS主题文件自定义Ant Design，并在整个项目中使用Ant Design在SCSS文件中的已编译变量
05-17
@import您的theme.scss文件中的Ant Design的和 变量。 当theme.scss更改时，热重新加载您的项目。 :open_book: 有关该插件及其用法的更详细概述，请上的“文。 目录 -有关从npm安装此Webpack插件的说明。 配置 ...
vscode-live-sass-compiler：使用实时浏览器重新加载功能将Sass或Scss文件实时编译为CSS
02-05
VSCode扩展，可帮助您通过实时浏览器重新加载将SASS / SCSS文件实时编译/转换为CSS文件。 用法/快捷方式 单击以从状态栏Watch Sass打开实时编辑，然后单击以从状态栏Stop Watching Sass Watch Sass打开实时编辑。 ...
vscode-scss:所有Sass文件中的变量，混入和函数的IntelliSense（仅SCSS语法）
04-29
工作空间中所有文件的SCSS IntelliSense（变量，混入和函数）。 捐款 你喜欢这个项目吗？ 通过捐赠，创建问题或请求请求来支持它。 安装 插件安装分为以下几个阶段： 按F1并选择Extensions: Install Extensions 。...
CSS -webkit-box-orient: vertical属性编译后丢失问题详解
01-19
一、起因 需求要求展示两行，多余的文字用三个点替代，于是用了这几个不太规范的属性 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是-webkit-box-orient: vertical;这个属性丢失，导致了不生效，在Styles里把这个属性加上就好了，于是断定是编译过程导致这个属性丢失。 二、解决办法 网上找了一个可行的解决方案，把autoprefixer关掉，有一种写法： /*! autoprefixe
css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)
09-27
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中，不过我们经常在文本溢出中使用这个参数
babel-plugin-transform-scss-import-to-string：Babel插件，用于将Sass导入内联到已转换的字符串中
01-30
babel-plugin-transform-scss-导入到字符串 Babel转换插件，用于将* .scss导入替换为带有静态变量声明CSS字符串。 例 import sideEffectStyles from './styles.sass' ; // vvv const sideEffectStyles = '.foo { ...
webpack中不显示-webkit-box-orient这个css属性
小花同学的成长之路
09-12 1339
今天在写vue项目时发现webpack打包时不会解析 -webkit-box-orient 这个属性，解决方法如下。 /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */  ...
关于vscode中使用easy sass扩展时，scss文件保存后不会产生css文件的解决方法
m0_65450343的博客
05-01 3878
关于vscode中使用easy sass扩展时，scss文件保存后不会产生css文件的解决方法
css多行文本溢出省略失败问题
qq_41619741的博客
01-02 969
重点： 但是在多行文本溢出省略中有时会出现文字不换行的情况，添加white-space: normal;就成功了 单行文本溢出省略 .single-row text{ display: block; line-height: 40rpx; height: 120rpx; overflow: hidden; white-space: nowra...
Vendor Prefix:为什么需要浏览器引擎前缀
X-rapido的专栏
06-28 1039
浏览器引擎前缀(Vendor Prefix)是什么？Vendor prefix—浏览器引擎前缀，是一些放在CSS属性前的小字符串，用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和Safari浏览器使用的是WebKit渲染引擎，火狐浏览器使用的是Gecko引擎，Internet Explorer使用的是Trident引擎，Opera以前使用Presto引擎，后改为WebKit引擎
解决Stylelint --fix后会把vue文件中css以外的部分删除掉
Rachel的博客
08-21 2727
问题：–fix自动修复会把Vue文件中所有内容都移除掉,只剩css代码 解决方案：移除配置中的processors项 原因: 网上一些过时的教程包括 github 上的讨论都推荐使用 stylelint-processor-html 或者 @mapbox/stylelint-processor-arbitrary-tags 来解析 html 或 vue 中的 css ，这本身并没有什么问题，但是这...
scss文件中 ::v-deep 报错
06-02
如果在 SCSS 文件中使用 `::v-deep` 报错，可能是因为你的项目使用了 Vue.js 2.x 版本，而 `::v-deep` 是 Vue.js 3.x 版本中的语法。 如果你想在 Vue.js 2.x 中使用 `::v-deep`，你可以使用 `>>>` 或 `/deep/` 代替。例如： ```scss /* 使用 >>> */ .parent >>> .child { color: red; } /* 使用 /deep/ */ .parent /deep/ .child { color: red; } ``` 另外，如果你的报错信息是类似于 `Unknown pseudo-element or pseudo-class` 的错误，可能是因为你的编译器版本过旧，需要升级到支持 `::v-deep` 的版本。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值