vue中使用西瓜视频中引入自定义样式,绝对可以
首先配置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]
为自定义样式名,可不输入。
页面中引入
1 2 | import Player from 'xgplayer' ; import './.xgplayer/skin/index.js' ; |
这样你就可以随心所欲地更改样式了么么哒
长风破浪会有时,直挂云帆济沧海
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南