Vue中引入样式文件的方法


Posted in Javascript onAugust 18, 2017

一、在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 nofollow" >  
 </head>
 <body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
 </body>
</html>

2)在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入。这里会对scss文件进行解析,将对应的css代码插入生成html文件的style标签中,成为内联样式。

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUi from 'element-ui'
import '@/common/scss/theme-blue.scss'
Vue.config.productionTip = false
Vue.use(ElementUi);
/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

3)在对应的模板.vue文件中引入

发现一个问题,如果不在main.js中引入,直接在诸如app.vue文件中引入scss文件时候,虽然会将css代码插入生成的html标签中成为内联样式,但是不会讲scss文件进行解析,会引发问题。

难道scss文件必须首先在入口的index.js中引入,才能将scss解析,具体的vue中依赖某一个scss,还需要单独再引入一次。

总结

以上所述是小编给大家介绍的Vue中引入样式文件的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
AngularJS入门之动画
Jul 27 Javascript
jQuery实现点击行选中或取消CheckBox的方法
Aug 01 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 #jQuery
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 #Javascript
select自定义小三角样式代码(实用总结)
Aug 18 #Javascript
js使用highlight.js高亮你的代码
Aug 18 #Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 #Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 #Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 #Javascript
You might like
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
tensorflow如何批量读取图片
2019/08/29 Python
python中wheel的用法整理
2020/06/15 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python 如何快速复制序列
2020/09/07 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
什么时候需要进行强制类型转换
2016/09/03 面试题
工程造价管理专业大专生求职信
2013/10/06 职场文书
教你打造完美的创业计划书
2014/01/06 职场文书
校园环保建议书
2014/05/14 职场文书
员工合理化建议书
2014/05/19 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
本溪关门山导游词
2015/02/09 职场文书
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python