如何修改Vue-Plyr播放器的界面显示颜色？

问题原因&解决方案 #

1. 直接修改node_modules/plyr/src/sass/settings下的文件不会生效：项目运行时引入的是plyr预先编译好的生产环境代码，并不会实时编译src目录下的sass源码，而且修改node_modules内的文件本身就不具备可复用性，重装依赖后改动就会丢失。
2. 你定义的CSS变量不生效通常是两个原因：

• 样式写在了带scoped属性的vue样式块中，scoped会给所有选择器加上组件独有前缀，:root选择器不会命中全局根节点，自然不会生效
• 你的自定义样式加载顺序早于plyr的默认样式，被优先级更高的默认样式覆盖了

正确修改方式

把变量定义放在项目的全局样式文件中（比如Vue项目的global.scss、main.scss，或是App.vue不带scoped属性的style块内），可以加!important确保优先级足够：

:root {
  --plyr-color-main: yellow !important;
  --plyr-video-background: rgba(0,0,0,1) !important;
}

不需要额外修改sass变量，除非你是自己手动从plyr源码打包编译，普通项目直接覆盖全局CSS变量即可实现样式自定义。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov