【Vue3+Ts project】scss全局变量 和 Vant-ui 框架组件样式覆盖

已于 2023-05-17 16:57:24 修改
阅读量606 收藏
点赞数
文章标签： scss ui vue.js
于 2023-05-17 16:43:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64494670/article/details/130729145
版权
文章介绍了如何在SCSS中设置全局变量，通过在`:root`选择器内定义变量并在Vue组件中使用。同时，文章提供了快速覆盖Vant-UI框架内组件样式的办法，只需在`src/style/main.scss`中重写相关类名并设定新样式。
摘要由CSDN通过智能技术生成

scss全局变量
 

1. 安装scss 
pnpm install scss 

2. src目录下创建 style/main.scss  ，在文件内使用 :root{ }  对象是全局样式变量名 

:root{ 
--自定义名: #000
}

3.在Vue文件 <style/> 内使用 
 

a {
    color: var(:root内变量名);
 }

vant-ui 框架内组件样式快捷覆盖

答: 直接在src/style/mian.scss内 将需要覆盖的 类名写入进去，并设置自己需要的样式 即可生效，

春暖花开.,
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+vant-UI框架实现购物车的复选框全选和反选功能
10-16
主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
解决vue单页面修改样式无法覆盖问题
01-19
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。 vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。 比如： <style scoped> .example { color: red; } </style> hi 转换结果： <style> .example[data-v-f3f3eg9] { color: red; } </styl
vue3中覆盖组件样式的方法
geng1025的博客
04-13 1112
选择哪种方法取决于你的项目需求和个人偏好。在大型项目中，建议使用模块化、可维护的样式解决方案，如 CSS 模块或 CSS 变量。对于小型项目或快速原型，全局样式或组件内样式可能更为方便。
在 Vue 中，如果你不能修改公共组件的样式，但需要在当前页面覆盖这些样式，你可以通过以下几种方法来实现：
最新发布
fxshy的博客
06-12 263
在 Vue 中，如果你不能修改公共组件的样式，但需要在当前页面覆盖这些样式，你可以通过以下几种方法来实现：
Vue项目中覆盖UI库的样式
野生松
04-22 918
现在大家开发一般都会用到一些UI库，但是这些UI库的组件样式一般都是写好的。这样导致我们可能会需要修改一些样式。 在Vue开发中，我们vue文件的样式都是写在<style lang="less" scoped></style>标签中的，加scoped是为了使得样式只在当前页面有效。使用scoped之后，实际的html中都会被加上[data-v-xxx]这个属性。但是第三方...
Vue3设置别名和scss设置全局变量
Miketutu的博客
05-12 411
Vue3设置别名和scss设置全局变量
vue3.0使用vant 覆盖原本类名样式方法 踩坑
muge1161105403的博客
08-04 1076
问题： 想修改 组件 ,发现只能通过style 修改，想通过类名覆盖却发现不生效 未解决： 用了样式穿透 /deep/:deep()之类的都不行 解决方式： 后来发现是scoped的问题，把scoped去掉或者再加一个 style标签代码如下 代码如下： <style lang="less" scoped> 导航的样式 .nav { height: 35px; background-color: black; box-sizing: border-box;
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
使用vue3+ant-design-vue+vite+ts开发的通用后台框架.zip
01-04
使用vue3+ant-design-vue+vite+ts开发的通用后台框架，实现了权限系统、动态菜单、表格集成快速使用等功能，简洁干净开箱即用。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 ...
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
在本项目中，我们探索了如何使用最新技术栈进行全栈开发，重点是前端的Vite3、Vue3、TypeScript以及Ant Design Vue3的整合，同时涉及后端的SpringBoot、MybatisPlus和MySQL。这是一个全面的实战教程，旨在帮助开发者...
vue3+ts项目中router+pinia+scss+unocss+跨域配置
我愿化作繁星
05-27 1082
❗️❗️❗️❗️本文是根据B站作者视频以及稍作整理💖💖作者B站地址💖💖视频教程地址💖💖作者微信：专注前端技术分享,技术讨论加。
vue 中 自定义css 覆盖第三方ui样式
Julie_Go的专栏
10-09 1612
在项目引入element-ui 等第三方ui库时，自定义css覆盖第三方样式的方式： 1.scoped的自定义css无法覆盖第三方样式，把自定义css写在全局style下（一般除非是全局样式，否则容易污染其他组件内的样式） 2.使用 >>> (普通css文件内) 或/deep/ (使用sass 或less 编译) 注：有时/deep/会报错，可以使用::v-deep 代替 <style lang="scss" scoped> ::v-deep .el-table .
vue vite webpack全局scss样式文件
m0_46978096的博客
12-01 1617
全局的scss样式文件，先安装sass-resources-loader 插件，在到创建vue.config.js文件(即使你vue3+ts，但这要用js后缀，感觉ts只作用于src里面)，在里面配置一下就行 插件下载方法 npm install sass-resources-loader vue.config.js里 module.exports = { css: { loaderOptions: { sass: { //单个全
Vant weapp -小程序组件库样式覆盖
weixin_42017221的博客
10-24 749
每一个组件文档中，底部都会有类似。
vue样式加scoped后不能覆盖组件的原有样式解决方法
热门推荐
小耳朵晨晨
09-19 1万+
&lt;style scoped&gt; &lt;/style&gt; 为了vue页面样式模块化，不对全局造成污染，建议每个页面的style标签加上scoped，表示他的样式只属于当前的页面，父组件的样式不会泄漏到子组件中。但是scoped也会造成一些额外的负担，如无法覆盖原有组件的样式。 可以加 /deep/  。 深度作用选择器 /deep/  or  &gt;&gt;&gt; 如果希...
vue组件样式覆盖
sun~的博客
01-30 1010
项目中的css文件被style-loader处理，最终打包后的文件放在style标签内，放到html中作为一个内部样式表。组件库的样式先于自定义样式引入。
vue+scss 全局通用样式
G.E.M.千百度的博客
07-14 286
【代码】vue+scss 全局通用样式。
vue前端 页面样式强制覆盖
画个圆圆的地球
08-30 1807
前端页面样式强制覆盖
vite+ts配置scss全局变量
11-23
以下是vite+ts配置scss全局变量的步骤： 1.安装依赖 ```shell npm install -D sass vite-plugin-style-import ``` 2.在vite.config.ts中配置插件 ```typescript import { defineConfig } from 'vite'; import vue ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值