首先配置sass-loader和raw-loader

方法,再vue-config.js中加上这一段代码

module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg') // 清除已有的所有 loader。
// 如果你不这样做,接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear() // 添加要替换的 loader
svgRule
.use('raw-loader')
.loader('raw-loader')
}
}

然后命令行输入npx xgplayer eject [targetDir] [skinName]实现将播放器样式相关代码复制到指定相对路径[targetDir]下的.xgplayer/skin文件夹中,然后就可以任意修改实现自定义样式了。[skinName]为自定义样式名,可不输入。

页面中引入

import Player from 'xgplayer';
import './.xgplayer/skin/index.js';

  这样你就可以随心所欲地更改样式了么么哒

vue中使用西瓜视频中引入自定义样式,绝对可以的更多相关文章

  1. 头条小视频和西瓜视频signature签名算法

    点击上方↑↑↑蓝字[协议分析与还原]关注我们 "分析今日头条内小视频和西瓜视频分享后浏览器打开所用的signature签名算法." 上月写的一篇关于使用微信的wxid加好友的文章, ...

  2. Vue:如何在vue-cli中创建并引入自定义组件

    一.创建并引入一个组件 1.创建组件 vue-cli中的所有组件都是存放在components文件夹下面的,所以在components文件夹下面创建一个名为First.vue的自定义组件: <t ...

  3. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  4. Android 工程引入自定义Library后,工程无法识别Library中的类

    这个问题有点神啊. 在工程中导入第三方类库包(自定义Library)本来运行的好好的,突然间所有引用的Library中的类都无法在工程中引用了,一个劲的打红叉,eclipse也重启了,项目也clean ...

  5. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  6. vue项目引入自定义.css的样式文件

    ES6的引入方式: .vue文件中 css文件引入 <template></template> <style scoped> @import "../as ...

  7. CKEDITOR 4.6.X 版本 插件 弹出对话框 Dialog中 表格 Table 自定义样式Style 问题

    项目开发过程中,发现CKEDITOR 插件的弹出框 内 如果跟据项目需要写表格(table tr td),表格的边框等属性会被 CKEDITOR的清除或覆盖,导致表格很难看. 问题关键: 插件弹出框d ...

  8. C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形

    原文:C#如何在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形 在VS2015 2017版本中编写WPF UI界面引入第三方SVG图形     最近在写WPF界面的时候遇到一个情 ...

  9. Android短视频中如何实现720P磨皮美颜录制?

    视频中磨皮.美颜功能已成为刚需,那么如何在Android短视频中实现720P磨皮美颜录制?本篇文章中,网易云信资深开发工程师将向大家介绍具体的操作方法. 相关阅读推荐 <短视频技术详解:Andr ...

  10. vue中嵌套的iframe中控制路由的跳转及传参

    在iframe引入的页面中,通过事件触发的方式进行传递参数,其中data是一个标识符的作用,在main.js中通过data进行判断,params是要传递的参数 //iframe向vue传递跳转路由的参 ...

随机推荐

  1. dotnet 项目生成自签名证书

    解决dotnet 项目浏览器不安全提示 dotnet dev-certs - 生成自签名证书,以便在开发中使用 HTTPS. dotnet dev-certs https --clean dotnet ...

  2. 一,创建一个electron应用程序

    之前我们已经用html+css+js创建了一个项目,现在将这个项目用electron以应用程序呈现. 1,首先新建一个文件夹,从终端进入该文件夹: 2,在该文件夹下执行npm init,初始化该项目. ...

  3. eclipse静态资源保存不重启(热部署静态资源/html)

    简单的来说就是windows->Prefrence->搜索 build automatically 并勾选就可以 不同的版本设置选项可能略微不同,其实比较简单但是新手可能不好找,所以帮到的 ...

  4. 调试以及Linq查询

    1.调试的步骤 调试快捷键: F10逐过程(不会进入函数内部,直接获取函数运行结果) F11逐语句(会进入函数) F5执行,如果调试中多个断点,按F5执行到下一个断点 出现黄色箭头表示执行到这一句,但 ...

  5. HTML基础知识学习

    一.HTML概述 1.系统结构: ①.B/S架构 Browser Server(浏览器/服务器的交互形式.) Browser支持哪些语言:HTML CSS Javascript S是服务器端Serve ...

  6. 鸣人的影分身【按照前i个数,最小数是不是0,建立转移方程】

    鸣人的影分身 题意 鸣人最多有n个分身,m的能量.分身的能量可以为0. 问有多少种方案数. 思路 很容易定义状态:f[i] [j]: 前i个分身,共花费能量j的方案数. 状态转移:刚开始想的枚举第i个 ...

  7. [Leetcode 104]二叉树最大深度Maximum Depth of Binary Tree

    题目 求二叉树的深度,即根节点出发的最长路径上点的个数,即最长路径+1(本身这个点 https://leetcode.com/problems/maximum-depth-of-binary-tree ...

  8. HttpRunner4.x版本调试测试用例时报错 run testcase failed error="abort running due to failfast setting: variable XXX not found" 解决方法

    httprunner脚本调试报错 未知变量名称未定义问题 解决了,由于请求的requestBody证件照片链接包含$关键字,需要使用$$转义.   执行脚本报错截图 接口requestBody参数截图 ...

  9. 1008.Django模型基础03

    一.关系表的数据操作 关系表中的数据操作 查看数据库中的表结构 一对多表关系数据的添加: 1. 第一种方式就是跟之前一样,用传参的方法添加,需要注意的是外键的值必须是关联表中已存在的值: 2. 第二种 ...

  10. 解决idea xml文件中的中文注释乱码

    今天用idea编译xml文件的时候报错了,打开编译好的xml文件发现是中文乱码问题,按照百度上靠前的办法设置了一下,并没有解决乱码问题,在当前项目中直接设置就是不生效,最后删掉编译好的 target/ ...