vue中使用西瓜视频中引入自定义样式,绝对可以

时间:2024-02-23 08:10:39

首先配置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\';

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