xgplayer自定义播放器样式

这段时间组内的直播项目，前端笔者采用的字节的西瓜播放器，第一眼觉得雀氏是挺好用的，反正笔者是觉得比videoplayer好用。

关于自定义样式，可以看下官方文档讲述的。

注意：笔者用的是2.3.1的xgplayer版本也是可以进行自定义的。但是不支持CDN进行自定义样式
其次抛开事实（安装步骤）不谈就是一下两步

安装: npm install xgplayer@2.3.1

安装完成之后在console里面执行这个命令

npx xgplayer eject ./src/assets/ my-custom

这里的 [targetDir]指的是你自定义样式要存放的位置，这里他会解压出来西瓜播放器的所有scss样式文件和前端的js文件；然后[skinName]指的是你给自己的自定义样式起的名字。

还有最最重要的一件事：配置解析svg的配置，因为西瓜播放器里面的图标都是svg格式的
同时记得安装sass-loader

const webpack = require('webpack')
module.exports = {
	//vuecli@3.x版本把基本的配置文件都封装到了./node_modules/@vue/cli-sevice/lib/config下
	lintOnSave: false,
	publicPath: './',
	 chainWebpack: config => {
        const svgRule = config.module.rule('svg')
        // 清除已有的所有 loader。
        // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
        svgRule.uses.clear()
        // 添加要替换的 loader
        svgRule
           .use('raw-loader')
           .loader('raw-loader')
    }
}

如果要使用的话就如上图所示，引入你自定义样式的index.js文件。