VUE引用CSS，全是干货

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

在vue中，很多时候会遇见相同效果的css，这个时候我们可以写一个css文件，想要使用时就去调用就可以了，关键来了，vue怎么样引用呢?

1.全局引入

将外部的css文件放到vue工程的一个文件夹下面，引入外部文件只需要在main.js文件中

import './assets/css/spanTextShadow.css'

 注意:引入后可能会导致你项目中所有的以此为类名或者标签名等的css样式改变

2.局部引入

在你的vue文件下引用

<style scoped>
    @import './assets/css/spanTextShadow.css'; 这个分号一定要写，不然会报错
</style>   

xuanxuanping
关注
  • 11
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue引入css三种方式
atu1111的博客
04-06 4万+
vue引入css三种方式 1.在对应.vue文件的中引入 <script> import "@/assets/css/reset.css" </script> 2.在.vue文件的中引入 <style scoped> @import '../../assets/css/VueCss.css'; </style> 3.main.js 全局引入 import './assets/css/common.css' ...
vue最新实战项目vue2vuexwebpackes6干货多多
08-11
本项目是基于vue2最新实战项目，是适合新手进阶的绝佳教程。代码简单易懂，注释多多。实现了移动端使用最多的 无限滚动，图片加载，左右滑动，等待。
Vue组件中引入CSS样式的三种方式
m0_46829545的博客
11-30 8574
Vue组件中引入CSS样式的三种方式
vscode vue项目 @import 引入css、styl文件问题
最新发布
qq_43746935的博客
06-01 365
vue脚手架 @vue/cli 5.0.8。保存之后，再运行就可以解决了。node版本18.18.1。
vue 中css的引入方式
丽丽大神ing的博客
03-20 2023
1. 一般是在main.js中引入公共样式 import '@/assets/css/reset.css' 2. 在App.vue中引入 <style> @import "assets/icon/iconfont.css"; </style> 3. 在views下面的xxx.vue中引入 <style> @import "../asset...
vue引入css
你蠢哭我咯的博客
08-01 4656
第一种全局引入： 在main.js中import './assets/iconfont/iconfont.css' //注意'./'一定要加不然会报错第二种局部引入： 在组件中<style scoped> @import '../assets/iconfont/iconfont.css'; </style>
vue中css功能总结
Jk200165的博客
09-15 3871
实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。创建的 DOM 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。样式中的选择器如果想要做更“深度”的选择，也即：影响到子组件，可以使用。渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。如果想让其中一个样式规则应用到全局，比起另外创建一个。并且将生成的 CSS class 作为。默认情况下，作用域样式不会影响到。
vue 添加css样式的三种方式
lch_blog
07-02 7661
1. 内部样式表 在 .vue文件里直接写 2. 外部样式表 1.在pulic文件加下创建 2.在vue文件中引用 3. 在 public/index.html文件中引入 这里引入的是 公共组件，对整个项目都有效 一边在哪里用，在哪里引入/写。 ...
CSS修改样式问题（Vue）
qq_50577394的博客
05-19 3116
问题：在我们页面开发时，需要修改样式。样式有的是全局公有样式，有的是局部样式。有时需要公有样式进行局部样式调整，那么如何灵活的调整样式呢？
在vue中引入外部的css文件
热门推荐
web前端学习总结
09-21 8万+
在vue中引入外部的css文件 在项目的src文件下，新建一个style文件夹，存放css文件。 1. 全局引入 将外部的css文件放到style文件下，引入外部文件只需在main.js文件中 import './style/reset.css' 我引入的是清除默认样式的css文件 2. 局部引入 &lt;style scoped&gt; @import '../assets/ico......
Vue 导入外部css样式文件
PrimaryColor
07-14 5746
1.css文件一般放在src下，新建style文件夹中。 2.引入文件，在app.vue中添加如下： <template> <div id="app"> <router-view /> </div> </template> <style lang="scss"> //取消页面的默认外边距。 body { margin: 0; padding: 0; } @import "./style/base.css";
vue-neo4j:vue使用D3对neo4j进行可视化
03-15
Neo4j Vue安装步骤克隆或下载该库到本地下载neo4j并安装到本地，启动neo4j服务进入到该工程的根目录，输入命令：npm run update进行npm包的导入使用命令：npm run dev启动该工程默认端口是：8081 neo4j账号信息： ...
Vue20实现的Gank的WebAPP
08-10
【Vue2.0实现的Gank的Web APP】是一个基于Vue.js框架的移动Web应用程序，主要目的是为了展示和学习如何利用Vue2.0构建一个功能完善的移动端应用。Vue.js是目前非常流行的一个前端JavaScript框架，它以其轻量级、易...
archives:一个在成长的前端developer文档库，里面包含了JS、Vue.js、CSS、Node.js、React.js等前端基础知识和技巧库.....
07-24
CSS干货 css3中filter的各种特效 24种表单input输入框聚焦动画特效 周边 从前端角度看企业软件的研发过程 开发干货 https://v-cdn.zjol.com.cn/276100.mp4 //测试视频地址数字编号可随意换 各种视频格式 用来测试的...
vue最新实战项目，vue2+vuex+webpack+es6干货多多，新手福利.zip
10-21
它将各种资源（如JavaScript、CSS、图片等）视为模块，并根据依赖关系进行编译和打包。Webpack的配置文件（webpack.config.js）允许我们自定义模块解析规则、加载器、插件等，以满足项目的特定需求。在Vue项目中，...
vue引入css文件
ymyzyx的博客
10-07 999
【代码】vue引入css文件。
vue组件中导入css文件
m0_68094390的博客
05-24 2446
这种方式需要使用Vue CLI构建工具，在webpack中配置CSS加载器，用于将CSS文件打包到组件代码中。在Vue组件的script中使用import命令导入需要的CSS文件。
vue3和vue2 使用css变量的方法（附带scss的使用方式）
柑橘乌云_
05-06 8431
通过内联样式写css变量（可以调用js里面的变量），如何在style标签里面就可以使用css变量。这么写在 scss 是会编译报错的。建议写成第二种这种计算属性的方式，当值发生改变，也可以响应变化。直接在style标签里面使用v-bind绑定js里面的变量。会将双引号自动去掉，从而得到。，解决了编译失败的问题。
前端之vue的CSS样式
weixin_46372074的博客
04-14 7383
vue的CSS样式vue项目的结构Vue的三种样式化方法：外部CSS文件样式 相关名称： CSS预处理器（如SCSS）或后处理器（如PostCSS）。 vue项目的结构 Vue的三种样式化方法： 外部CSS文件。 单个文件组件（.vue文件）中的全局样式。 单个文件组件中组件范围的样式。 外部CSS文件样式 vue项目中有一个与 components 同级的文件夹 asset，我在这里理解成“有用的东西”，存放资源文件，如，图片、css。 ...
vue mianjs 引用css_vue实战-换皮肤
05-25
要在 Vue 的 main.js 文件中引入 CSS 文件，可以使用 `import` 语句。首先确保您已经将 CSS 文件放置在项目的正确位置。 假设您的 CSS 文件位于 `src/assets/css/` 目录下，名为 `skin.css`。 那么在 `main.js` 文件中添加以下代码： ```js import Vue from 'vue' import App from './App.vue' // 引入 CSS 文件 import './assets/css/skin.css' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') ``` 这样，`skin.css` 文件就会被引入到您的 Vue 应用程序中，从而实现皮肤切换的功能。请注意，您还需要在 HTML 文件中添加一个 `<link>` 标签来引入该 CSS 文件，以便在页面加载时正确加载样式。 另外，如果您需要在组件中使用该 CSS 文件中定义的样式，可以在组件的 `<style>` 标签中使用 `@import` 语句来引入该 CSS 文件。例如： ```vue <template> <div class="my-component"> <!-- ... --> </div> </template> <script> export default { name: 'MyComponent', // ... } </script> <style lang="scss" scoped> /* 引入 skin.css 文件 */ @import "@/assets/css/skin.css"; /* 使用 skin.css 中定义的样式 */ .my-component { background-color: $bg-color; color: $text-color; } </style> ``` 请注意，这里使用了 SCSS 语法，如果您的项目中使用的是 CSS，可以将 `lang` 属性设为 `css`。同时，为了确保样式不会影响到其他组件，这里还添加了 `scoped` 属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值