vue引入css文件

原创 已于 2023-10-10 11:51:02 修改 · 1.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #css #前端

于 2023-10-07 11:40:38 首次发布
文章讲述了在使用Qiankun框架开发时，如何正确地在子应用中局部引入CSS文件，避免npmrundev时出现错误，特别强调了当子应用组件位于弹窗等外部body时，需将CSS下载或加载到主应用中以确保样式显示。

局部引入css文件

<style type="text/css">
  @import "~@/assets/shipLock/css/shiplock.css";
</style>
<style lang="scss" scoped>
  @import "@/assets/styles/manual-scheduling.scss";
</style>

注意点：

  1. 引入本地css文件 前面要加上~，否则npm run dev运行报错
  2. qiankun引入的子应用需要把css下载或加载到主应用上，因为若是子应用的组件在弹窗里，弹窗挂载在外部body上，从主应用进去没有样式
ymy_yq
关注
精选资源
vue element 项目默认css文件 style
01-02
一个标准的Vue Element项目会有一个默认的CSS文件，通常命名为`styles`，这个文件用于存放全局样式或者项目的基础样式。`styles`文件一般位于`src`目录下，这是Vue项目的源代码根目录，包含组件、路由、公共样式、...
解决vue打包css文件中背景图片的路径问题
10-18
总结一下，解决Vue打包后css文件中背景图片路径问题的关键在于合理配置publicPath。在实际操作过程中，我们既可以在Webpack的配置文件中设置，也可以通过vue.config.js来进行更灵活的配置。正确的路径设置能确保在...
Vue项目中引入外部文件的方法（css、js、less）
12-09
这两天学习了Vue.js ，正好了解了如何引入外部文件的方法，而且很重要，所以，今天添加一点小笔记。 例子中css文件采用bootstrap.css，js文件采用jQuery，less文件用less.less(自定义文件) 步骤一：安装webpack cnpm install webpack -g 步骤二：在src/assets下面新建css、js、less、fonts文件夹，并放入对应文件。 将bootstrap.css放入css目录下，bootstrap.min.js放入js文件下，fonts字体放入fonts目录下 步骤三：安装js依赖 cnpm install jquery --
vue 引入公共css文件的简单方法(推荐)
08-28
下面小编就为大家分享一篇vue 引入公共css文件的简单方法(推荐)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中引入样式文件的方法
12-03
一、在vue中使用scss 首先进行安装如下依赖：  cnpm i sass-loader node-sass -D 二、vue中引入样式文件 1）在index.html模板html文件中引入，这种方式引入的原样编译在生成的html文件中，如果想要通过link引入外部的样式文件，建议使用这种方式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis</title> <link rel="stylesheet" href="./static/reset.css" rel="external n
在vue中引入外部的css文件
热门推荐
web前端学习总结
09-21 9万+
在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
weixin_72132360的博客
08-03 1443
在中，很多时候会使用相同效果的css，这个时候我们可以写一个把该样式写入一个css文件，想要使用时就去调用就可以了，关键来了！vue如何去引用这个css文件呢?
VUE引用CSS，全是干货
qq_62694876的博客
12-14 7422
在vue中，很多时候会遇见相同效果的css，这个时候我们可以写一个css文件，想要使用时就去调用就可以了，关键来了，vue怎么样引用呢?
在vue中如何引入外部的css文件
xwnxwn的专栏
03-16 7557
这篇文章主要介绍了在vue中如何引入外部的css文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教。
vue组件中导入css文件
m0_68094390的博客
05-24 2769
这种方式需要使用Vue CLI构建工具，在webpack中配置CSS加载器，用于将CSS文件打包到组件代码中。在Vue组件的script中使用import命令导入需要的CSS文件。
vue 引入css文件
攻防人生3722的博客
07-14 3973
vue 在组件内引用其对应的样式文件,在组件的style标签内引入即可 &lt;style&gt; @import "./assets/css/PagesCSS.css"; &lt;/style&gt;
Vue 导入外部css样式文件
PrimaryColor
07-14 5967
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中引入css文件
诚的博客
06-12 1511
一.全局引入 import "@/文件路径"; //@代表的是你的项目根路径 例如： 　　 二、在style标签中引入(可设置成局部) 　　在标签上添加scoped属性后则变成了局部引用 　　注意：下图的icon.css文件仍然是全局引用，需要将文件后缀改为scss或者less才能变成局部的在更换过程中建议改成scss类型，因为它支持css的所有语法。 ...
vue引入css三种方式
atu1111的博客
04-06 5万+
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局部引入css
qq_34631220的博客
07-25 772
vue局部引入css
vue中css写法_vue中引入css文件
weixin_39961943的博客
12-22 590
Populating Tree Item With Record Group In Oracle FormsThe below plsql program unit could be used in a WHEN-NEW-FORM-INSTANCE trigger to initially populate ...js分页今天看了下妙味课堂的教程,写了下关于分页的js代码,写完的感觉就是有点小麻烦...
vue引入css
你蠢哭我咯的博客
08-01 4726
第一种全局引入： 在main.js中import './assets/iconfont/iconfont.css' //注意'./'一定要加不然会报错第二种局部引入： 在组件中<style scoped> @import '../assets/iconfont/iconfont.css'; </style>
Vue组件中引入CSS样式
lzping_719的专栏
11-07 856
【代码】Vue组件中引入CSS样式。
vue2 css文件怎么引入css文件
最新发布
06-07
### 在 Vue2 中正确引入外部 CSS 文件的方法 在 Vue2 项目中，引入外部 CSS 文件可以通过多种方式实现，包括全局引入和局部引入。以下是具体方法的详细介绍： #### 全局引入 CSS 文件 如果需要在整个项目中使用...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值