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 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
javascript使用call调用微信API
Dec 15 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
jQuery消息提示框插件Tipso
May 04 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
jquery Ajax 全局调用封装实例详解
Jan 16 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 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函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
python备份文件的脚本
2008/08/11 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
利用pyinstaller将py文件打包为exe的方法
2018/05/14 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
wxPython实现画图板
2020/08/27 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
给幼儿园老师的表扬信
2014/01/19 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android