vue中如何引入css文件
两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法:
import 'element-ui/lib/theme-default/index.css'
这种写法适用于此css文件存在于项目中,不适用于通过网址访问的方式引入,会报错。偶试着引入Font Awesome,结果报错:
|
1
|
import "http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" |
而直接在组件中引入却可以,组件中引入也比较简单:
<style>
@import "../css/style.css";
@import "//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
</style>
引入语句后面最好加上分号,只引用一个还好,引用多个不加分号会报错。
当然还有使用require()引入的,暂时比较习惯使用import。
vue中如何引入css文件的更多相关文章
- 如何在vue中全局引入stylus文件的公共变量
新建 一个公共的stylus公共文件添加公共变量,如下: 修改下图圈出的文件: 具体的修改如下: // generate loader string to be used with extract t ...
- vue中引入css文件
两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- Vue在单独引入js文件中使用ElementUI的组件
Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...
- vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件
vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...
- (转)webpack和webpack-simple区别(如何引入css文件)
博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simp ...
- vue中如何引入全局样式或方法
vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...
- html引入css文件
在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...
- jquery,js引入css文件,js引入头尾
jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...
随机推荐
- eclipse中解决update maven之后jre被改成1.5的问题
1.在项目的pom.xml中加入下面的代码就能解决(加入插件) <build> <plugins> <plugin> <groupId>org.apac ...
- TreeMap元素必须实现Comparable接口
纠正一下,TreeMap实现一定顺序是通过Comparable接口的,而他实现元素不重复也是完全通过compareTo,而不是hashCode和equals,因为debug不会走到hashCode和e ...
- 第七周学习总结&JAVA实验五报告。
JAVA实验报告五: 实验四 类的继承 实验目的 理解抽象类与接口的使用: 了解包的作用,掌握包的设计方法. 实验要求 掌握使用抽象类的方法. 掌握使用系统接口的技术和创建自定义接口的方法. 了解 J ...
- js关闭当前页面(窗口)的几种方式
1. 不带任何提示关闭窗口的js代码 代码如下: <a href="javascript:window.opener=null;window.open('','_self');win ...
- echarts折线图,纵坐标数值显示不准确的问题解决
问题如图: 问题解决:将stack去掉或注释 如下图:
- c++使用openssl操作秘钥相关
PEM_write_bio_RSAPublicKey(pub, keypair);//生成-----BEGIN RSA PUBLIC KEY-----类型的公钥 PEM_write_bio_RSA_P ...
- java自定义classloader引发的思考
引用 java类的热替换 classloader机制 如下图所示,java的classloader是双亲委派机制.会首先从父classloader加载指定的class,如果加载不到才会从子classl ...
- QQ聊天监视器(简易版),可以获取当前QQ进程的聊天窗口内容
原始出处: https://www.cnblogs.com/Charltsing/p/QQChatsMonitor.html 监视QQ聊天信息有很多种方法,最简易的就是直接抓取聊天窗口内容,一个QQ进 ...
- 读取位置 0xcccccccc 时发生访问冲突
XXXXX.exe 中的 0x1004eec2 处有未经处理的异常: 0xC0000005: 读取位置 0xcccccccc 时发生访问冲突 DEBUG模式下总是出现此错误,改为Release模式,错 ...
- Raspbian 编译安装 PHP 7.2
原文地址:Raspbian 编译安装 PHP 7.2 0x00 配置 开发板: Raspberry Pi 3B 系统: Raspbian 2019-04-08 stretch 0x01 下载源码 20 ...