vue中引入公共css样式

最新推荐文章于 2024-04-27 15:27:23 发布
最新推荐文章于 2024-04-27 15:27:23 发布
阅读量6.1k 收藏 11
点赞数
文章标签： css vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuexuexiang/article/details/124697088
版权

首先在静态文件夹资源assets中创建css文件来放置公共样式的css文件，这里我为公共css样式的文件起名为common.css，在这个文件中写一些公共的样式即可。

接下来就是把这个样式如何引入应用，有两种方法：

1）在App.vue中引入

在style的样式下利用@import引入：

2）在main.js文件中引入：

小薛不易
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目引入字体.ttf的方法
12-09
1、下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例） 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 src: url('FZCYJ.ttf'); //引入字体 font-weight: normal; font-style: normal; } 4、配置webpack.base.conf.js 文件 5、App.vue引入字体 6、可在body中设置字体 body{ font-family: FZCYJ; } 以上这篇vue项目引入字
vue3实现主题切换功能
前端菜鸡的博客
12-01 2794
使用 vue3+vite+scss实现主题切换功能
在vue中如何引入外部的css文件
xwnxwn的专栏
03-16 803
这篇文章主要介绍了在vue中如何引入外部的css文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教。
[移动端开发]移动端开发公共样式common.css
iChangebaobao的博客
02-11 747
common.css /*可选*/ /*CSS3盒子模型*/ box-sizing: border-box; -webkit-box-sizing: border-box; /*点击高亮我们需要清除清除 设置为transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框...
leetcode
qq_42964601的博客
05-01 487
LeetCode刷题 题目描述： 给定一个字符串 s，找到 s 中最长的回文子串。你可以假设 s 的最大长度为 1000。 测试示例1： 输入: “babad” 输出: “bab” 注意: “aba” 也是一个有效答案。 测试示例2： 输入: “cbbd” 输出: “bb” 方法：采用中心扩散方法，分别向左扩散，向右扩散，向左右扩散 使用max...
用vue-cli脚手架建的项目中 引入公共css文件的几种方法
热门推荐
HY_358116732的博客
08-30 1万+
1、在入口js文件main.js中引入，一些公共的样式文件，可以在这里引入。 import Vue from 'vue' import App from './App' // 引入App这个组件 import router from './router' /* 引入路由配置 */ import axios from 'axios' import '../static/css/global.cs...
vue 引入公共css文件的简单方法(推荐)
08-28
下面小编就为大家分享一篇vue 引入公共css文件的简单方法(推荐)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如何在vue项目中引入全局样式
Zhang_zhangxka的博客
01-17 2624
3.因为我的项目内是用了element-ui,所以自己加的类名的层级是不够的，不能覆盖原始的样式，在这里我加了！important 来提升层级，但是一般是不推荐使用，因为如果后期其他的同事也取了相同的类名的话，就很难改这个样式了，因为这个项目样式我一个人负责，所以我用了这种方法。1.可以在src下面的assets下面的style文件夹下，新建一个 .css / .scss /.less文件（可以根据自己具具体的情况去新建），我在这里是新建的.scss的文件。
vue项目css公共样式和全局引入
weixin_43697548的博客
04-26 6131
vue项目css公共样式和全局引入
vue全局公共样式
活宝小娜的博客
01-23 916
vue公共样式代码存放在/src/styles文件夹里。在main.js中引入index。
vue中引入公共样式的方法
weixin_63896561的博客
11-20 831
公共样式通常包括全局样式和组件样式。
Vue中引入样式文件的方法
12-03
二、vue中引入样式文件 1）在index.html模板html文件中引入，这种方式引入的原样编译在生成的html文件中，如果想要通过link引入外部的样式文件，建议使用这种方式： <!DOCTYPE html> <html> <head>...
vue.js引入外部CSS样式和外部JS文件的方法
10-17
主要介绍了vue.js引入外部CSS样式和外部JS文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-cli设置css不生效的解决方法
01-19
我们有的项目使用的是老的vue-cli脚手架生成的，今天想写点东西，发现.vue文件里面 style 里面写的样式都不生效了，很自然就想到是不是loader的问题。 在这种项目的webpack.base.config.js一般设置loader的 rules: ...
vue css 引入asstes中的图片无法显示的四种解决方法
11-21
这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！ 正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片...
【React】CSS 局部样式
小秀的博客
04-26 364
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
vuetify3.0+tailwindcss+vite最新框架
qq_43813351的博客
04-23 400
【代码】vuetify3.0+tailwindcss+vite最新框架。
CSS之显示覆盖内容（z-index）
最新发布
qq_60624992的博客
04-27 684
我们有的时候，希望下方的内容能够显示到上方，达到类似于多个图层的效果，此时我们可以利用z-index这个属性。z-index属性值是用来设置元素的堆叠顺序(元素层级)。
vue封装公共的css样式
08-31
在Vue中封装公共的CSS样式可以通过以下几个步骤实现： 1. 创建一个新的CSS文件，在其中定义公共样式。可以使用任何命名约定，比如`common.css`或者`global.css`。 2. 在Vue项目中引入该CSS文件。有多种方式可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值