可在相应的单vue组件引入相应文件。

1、引入外部.js文件。

2、引入外部.css文件。

使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped。

注:如果有样式时,应该放在#app上面引入,不然引入不成功!

方式1:

<style scoped>
@import "../static/font/iconfont.css";
</style>

方式2:

<style src="../static/font/iconfont.css"></style>

<style scoped>

 .....

</style>

3、引入外部.scss文件。

<style lang="scss" scoped>
@import '../../assets/scss/xx.scss'
</style>

借鉴原创( https://www.jianshu.com/p/3728525c4d19) 有删改

												

vue组件如何引入外部.js/.css/.scss文件的更多相关文章

  1. vue 组件内引入外部在线js、css

    参考:https://blog.csdn.net/u010881899/article/details/80895661 例:引入element-ui js: mounted() { const oS ...

  2. vue组件内部引入远程js文件

    之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位.如果放在index.html,这样每个组件都会有这个js.所以需要在组件内单独引入. 第一种操作 Dom引入js: export def ...

  3. Yii2.0 引入外部js css

    <script src="<?= Yii::$app->request->baseUrl . '/js/jquery-2.1.1.min.js'?>" ...

  4. vue页面引入外部js文件遇到的问题

    问题一:vue文件中引入外部js文件的方法 //在vue文件中 <script> import * as funApi from '../../../publicJavaScript/pu ...

  5. vue文件中引入外部js

    1.在项目的入口文件中(app.js)定义remoteScript标签 Vue.component('remote-script', { render: function (createElement ...

  6. 微信小程序从零开始开发步骤(七)引入外部js 文件

    上一章讲到小程序页面的四种常见的跳转的方法,这一章写如何引入一个外部的js文件,既utils文件夹的用处,其实步骤很简单: 1:准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内 ...

  7. 引入外部js

    引入外部js应该使用完整标签<script></script>,而使用单标签<script src=“”/>是错误的

  8. html中引入外部js文件,使用外部js文件里的方法

    外部js文件1: /** * 加了window.onload 后,直接引入js文件即可 * 页面资源全部加载完毕后会自动调用window.onload里的回调函数 */ window.addEvent ...

  9. [Asp.net Mvc]为js,css静态文件添加版本号

    方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/ja ...

随机推荐

  1. Spring Boot使用阿里云证书启用HTTPS

    1.到阿里云下载证书页面下载证书 2.根据页面内容,可以使用2种证书:PFX JKS 把对应证书放到src/main/resources目录下 在application.properties文件中加入 ...

  2. java 从txt文本中随机获取名字

    代码: /* 获取随机文件文字 */ public static String random(String path) {//路径 String name = null; try { //把文本文件中 ...

  3. SQL Server清空数据库中ldf日志文件

    USE [master] ALTER DATABASE [Whir_InternalSystem] SET RECOVERY SIMPLE WITH NO_WAIT ALTER DATABASE [W ...

  4. wls12C启用Gzip

    https://community.oracle.com/message/14109820 https://docs.oracle.com/middleware/1221/wls/NOTES/what ...

  5. 字典的常见操作<一>

    <1>修改元素 字典的每个元素中的数据是可以修改的,只要通过key找到,即可修改 Demo from pip._vendor.distlib.compat import raw_input ...

  6. web开发(九) 使用javamail进行发送邮件,(使用QQ,163,新浪邮箱服务器)

    在网上看见一篇不错的文章,写的详细. 以下内容引用那篇博文.转载于<http://www.cnblogs.com/whgk/p/6506027.html>,在此仅供学习参考之用. 一.发送 ...

  7. 基于 Node.js 的服务器自动化部署搭建实录

    基于 Node.js 的服务器自动化部署搭建实录 在服务器上安装 Node.js 编写拉取仓库.重启服务器脚本 配置 Github 仓库的 Webhook 设置 配置 Node.js 脚本 其他问题 ...

  8. 部署php程序报错:站点已关闭

    场景: 之前把公司线上的php源码包拿到笔记本的虚拟机上测试部署,部署完成后通过浏览器访问总是出现站点已关闭 原因:把线上php程序配置文件config.php里面的数据库连接信息改成了笔记本虚拟机的 ...

  9. 由于SID连接不匹配,监听器拒绝连接。

    java.sql.SQLException: Listener refused the connection with the following error:ORA-12505, TNS:liste ...

  10. elasticsearch索引大小写的问题

    今天用elasticsearch创建索引时碰到一个问题,用大写创建的索引,ES前端插件可以看到用大写创建索引存入的数据 程序启动,搜索的时候,却不显示数据,索引变成了小写,导致数据无法封装传入. 在h ...