两种方式引入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文件的更多相关文章

  1. 如何在vue中全局引入stylus文件的公共变量

    新建 一个公共的stylus公共文件添加公共变量,如下: 修改下图圈出的文件: 具体的修改如下: // generate loader string to be used with extract t ...

  2. vue中引入css文件

    两种方式引入css文件,一种是直接在main.js中引入(也可以在其他的.vue文件中的<script></script>标签中),即下面这种写法: import 'eleme ...

  3. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  4. Vue在单独引入js文件中使用ElementUI的组件

    Vue在单独引入js文件中使用ElementUI的组件 问题场景: 我想在vue中的js文件中使用elementUI中的组件,因为我在main.js中引入了element包和它的css,并挂载到了全局 ...

  5. vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

    vue引入swiper  vue使用swiper  vue脚手架使用swiper /引入js文件/引入css文件 ------------------------------------------- ...

  6. (转)webpack和webpack-simple区别(如何引入css文件)

    博主最近研究vue+webpack的时候想引入css文件死活引入不出来,在webpack-simple那里却能引得出来,十分的纳闷,然后细心的调试了一下,原来这webpack和webpack-simp ...

  7. vue中如何引入全局样式或方法

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  8. html引入css文件

    在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...

  9. jquery,js引入css文件,js引入头尾

    jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...

随机推荐

  1. 项目配置 xml文件时 报错提示(The reference to entity "useSSL" must end with the ';' delimiter.)

    这次在配置xml文件时,出现错误提示( The reference to entity “useSSL” must end with the ‘;’ delimiter.) 报错行为 <prop ...

  2. shell编程连接postgres数据库(数据备份)

    第一步:通过xshell或者其他工具连接到linux服务, 第二步:创建一个脚本:touch se.sh 第三步:输入i,代表开始输入内容 输入以下命令: 脚本如下:(sql语句可以是任何复杂的sql ...

  3. C++入门经典-例2.12-求逻辑表达式的值

    1:代码如下: // 2.12.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using ...

  4. 微信小程序底部菜单栏的使用方法

    1.找到项目根目录的配置文件 app.json,在配置文件中加入配置代码.例如: "tabBar": { <!--底部的导航配置属性--> "color&qu ...

  5. 有关C#写一个WindowsService的两篇文章

    1.http://blog.csdn.net/yysyangyangyangshan/article/details/10515035 上面的这篇文章一共两段,第二段讲的是使用代码来安装发布这个Win ...

  6. redis深度历险:核心原理与应用实践--笔记

  7. day2_Python基础二

    一.格式化输出 1.%s or %d %:表示占位符,注意,需要在内容中显示%时,在他之前增加一个%来转义,如显示5%,则:5%% s:表示字符串 d:表示数值digital 例子: name = i ...

  8. flask包request获取参数

    原博文:https://www.cnblogs.com/wangjikun/p/6935592.html request.method #获取请求方法request.form #获取post请求所有参 ...

  9. C# Selenium FireFox 接入阿布云

    业务需要购买http隧道,发现阿布云还行,使用Selenium本来想要用谷歌浏览器的,但是发现不能直接设置账号,所以选用火狐. 按照官方JAVA示例的改编,其中WebDriver实例化不能直接添加Fi ...

  10. malloc分配内存进行对齐的操作

    昨天面试高通Linux Kernel,面试官考了一个malloc内存对齐的问题,我晚上的时候细细的想了一下,实在是学习的不到位. 有的时候真的应该感谢,像是Qt.Ubuntu Gcc的编译器,他们做的 ...