首先配置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. charles3.11.1抓https包

    结论先行: 用的是安卓测试机,没加固之前的生产环境的安装包,可以抓到https请求 加固之后的包[也就是要上应用市场的包],抓不到https请求 电脑上的操作: 1. 安装证书[电脑上安装了charl ...

  2. 基础vue的一些知识补充

    一.:disabled 该属性能接受布尔值,可以用于元素的使用.当值为true时,该元素将无法被使用,如button的disabled属性被设置为true后,将无法被点击,input的disabled ...

  3. Java断言语句

    ​ 断言语句在调试代码阶段非常有用,断言语句一般用于 程序不准备通过捕获异常来处理的错误,例如,当发生某个错误时,要求程序必须立即停止执行.在调试代码阶段让断言语句发挥作用,这样就可以发现一些致命的错 ...

  4. go两种数据类型的区别、数据类型和操作符、常量、变量声明

    值类型和引用类型 1.值类型:变量直接存储值,内存通常在栈中分配. 基本数据类型int.float.bool.string以及数组和struct. 2.引用类型:变量存储的是一个地址,这个地址存储最终 ...

  5. uart 理解

    1: 串口字符串传输和单字节传输的差异体现在字节与字节间是或在停止位后有空闲位的插入(下图红箭头处,没有插入),即 uart_send("123")  和 uart_send('1 ...

  6. vue 数组对象去重

    unique(arr) {     const res = new Map();     return arr.filter((arr) => !res.has(arr.id) &&am ...

  7. xml与DataSet互转

    //将DataSet转换为xml字符串   public static string ConvertDataSetToXMLFile(DataSet xmlDS, Encoding encoding) ...

  8. 消息队列 RocketMQ4.x介绍和新概念讲解

    消息队列 RocketMQ4.x介绍和新概念讲解 Apache RocketMQ作为阿里开源的一款高性能.高吞吐量的分布式消息中间件 RocketMQ4.x特点 支持Broker和Consumer端消 ...

  9. 12.21linux学习第二十天

    今天老刘讲最后一章,第20章使用LNMP架构部署动态网站环境.定制安装17个安装包,编译安装要花很长时间,需要漫长的等待. LNMP动态网站部署架构是一套由Linux + Nginx + MySQL ...

  10. AJAX请求的基本操作

    1 const { request, response } = require('express'); 2 //引入express 3 const express = require('express ...