vue2.0_在vue中css样式的全局封装和引用

已于 2022-03-15 09:49:56 修改
阅读量1.8k 收藏 3
点赞数
分类专栏： Vue2.0 文章标签： 前端
于 2022-01-11 15:03:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiurenbb/article/details/122432912
版权
本文介绍了如何在Vue2.0项目中进行CSS样式的全局封装和引用。首先，文章建议在src/assets/css文件夹下创建自定义样式文件，然后按照特定格式封装样式。接着，这些样式需要导入到main.js中，以便在整个项目中使用。最后，通过使用CSS变量var()可以在组件中方便地调用和应用这些全局样式。
摘要由CSDN通过智能技术生成
前言

1、一处封装，处处可用。

步骤①

在src下的静态文件assets中新建一个css文件，在文件中按照以下写法格式，自行封装好需要的样式。记住，自定义的样式要放到html中。
格式：- -样式名: 样式；

html {
   
    --ThemeColor: #2e73ff;
    --ThemeColorDark: #2d6dca;
    --AidColor1: #fa7d00;
    --AidColor2: #ff2e2e;
    --AidColor3:
最低0.47元/天 解锁文章
QiuRenBB
关注
专栏目录
vue-cli2.0实现引入全局css样式
DoLi_JIN的博客
05-15 2227
一步步的实现vue-cli2.0引入全局ess样式。 引入less 和 sass-resources-loader npm install less less-loader --save npm install sass-resources-loader --save-dev 进入build > utils.js 找到函数 generateLoaders(声明函数处) 将以下代码复制到此函数后面 function lessResourceLoader() { var loade.
Vue2.0设置全局样式(less/sass和css)
08-28
主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue的css样式封装
silbier的博客
02-10 435
vue的css样式封装
在VUE项目中封装CSS样式
weixin_39347584的博客
09-16 1029
在VUE项目中封装CSS样式 提示：我们找到根目录下styles文件下新建CSS样式类 如图： 1.代码 代码如下（示例）： .button-login { margin-left: 20px; width: 90px; margin-bottom: 20px } 2.引用 代码如下（示例）： <style scoped> @import '../../../styles/basic.css'; </style> 该处使用的url网络请求的数据。
在Vue中引入全局css(Global CSS in Vue)
IU
06-21 8236
(1) 覆盖样式常用于覆盖第三方UI组件的样式(2) 默认样式常用于定义项目默认间隙、全局字体等。
贪吃蛇2.0_html_vue贪吃蛇_vue项目贪吃蛇_贪吃蛇_vue小游戏demo_
09-29
- 使用Vue DevTools扩展在浏览器中进行实时查看和修改应用状态，辅助调试和优化。 8. **打包与部署**： - 使用Vue CLI的`npm run build`命令对项目进行打包，生成生产环境的静态资源，然后上传到服务器进行部署。...
vue2.0中文离线官网文档（手册，教程，api）
06-29
Vue.js 2.0中文离线文档包含了丰富的学习资源，主要分为基础、进阶和迁移三个部分，旨在帮助用户逐步理解和掌握Vue.js的核心概念和技术。本文将深入探讨Vue.js 2.0的关键知识点，包括Vue CLI、项目结构、组件系统...
Vue2.0+elementUI_PC端后台管理系系统框架.rar
06-10
5. **Vuex状态管理**：在大型项目中，Vue推荐使用Vuex来管理全局状态。Vuex提供了统一的store模式，解决了组件间数据传递的问题。 6. **路由管理**：Vue Router是官方的路由插件，它配合Vue.js实现了SPA（单页面...
基于webpack搭建vue2.0的脚手架项目
10-11
它支持单文件组件（Single File Components, SFCs），使得样式、模板和逻辑可以封装在一个文件内，提高了代码可读性和维护性。另外，Vue 2.0还加强了组件的生命周期钩子，提供了更强大的状态管理解决方案Vuex，以及...
封装全局的scss样式
seimeii的博客
10-12 831
封装全局的scss样式
VUE项目中封装CSS样式
seimeii的博客
10-11 699
@import '../../../styles/basic.css';
vue设置全局css
6块腹肌的博客
12-23 1917
vue设置全局css只要在main.js里引入css文件即可，如： import '@/styles/index.scss' // 全局css
Vue:定义全局css样式
qq_45061461的博客
07-25 1504
在项目中,会存在很多的相同css样式,如果在每一个存在的vue文件中都加上这个样式的话,到时候需要更改的时候就会很麻烦,所以就需要把这些相同的css样式写入一个css文件中,然后在全局引入这个css文件.解决重复定义,修改起来麻烦的问题。1.在src -> common -> css ->base.less。2.main.js中引入 全局的样式。这些都是一些组件的css样式。
Vue css全局自适应
最新发布
qq_39652099的博客
06-05 1048
vue项目两种css全局自适应的方法
Vue项目中关于全局css的处理
Dormiveglia-flx的博客
04-14 4840
/ 关于声明全局的CSS：1 我们可以直接定义我们需要的。比如margin-top：10px2 我们可以引用第三方定义好的样式(element-ui或者elementPlus)例如：// 1.我们自己对margin的定义// 2. 引用第三方的CSS。
Vue 定义全局css文件
qq_52025611的博客
04-07 3020
Vue 定义全局css文件 作用：便于管理共同样式，可以在项目任意一处引入该样式，便于区分引入的样式库 全局css内容在这里插入图片描述，写入共同使用的样式，在这里也可以使用媒体查询 css样式在main.js文件中引入 要使用该样式的vue文件中引入 使用的时候在 class=“这里写要用的类名等” ...
在Vue项目中配置全局的css样式
xiaozshixuehui的博客
06-03 681
【代码】在Vue项目中配置全局的css样式。
Vue中实现无Gif全局loading组件的CSS样式封装
从标题中我们可以看出，该zip压缩包文件包含的内容主要是关于在Vue.js框架中实现一个自定义的全局CSS样式loading组件。在详细说明这个知识点之前，让我们先分解标题中的每个部分，了解所涉及的技术点。 1. Vue.js：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值