vue：如何配置 sass 提供页面换肤功能

Question

需求大概是这样的：
页面有三个版本，不同版本有不同的主题色以及背景图，如何在vue中配置sass,打包完成以后，根据后台传递参数，修改皮肤

Answer 1

后台传参数，大概的意思是不是用户可以个性化配置，主题色和背景单独写一个sass，可以在new一个vm实例之前使用Vue.http 请求一个主题参数，在入口文件中可以用 if()条件的方式require

        var axios_instance = axios.create({
            transformRequest: [function(data) {
                data = Qs.stringify(data);
                return data;
            }],
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        })
        Vue.prototype.$http = axios;
        Vue.use(VueAxios, axios_instance);
        
        Vue.use(Vuex);
        Vue.axios.get('https://api.douban.com/v2/book/search', {
            params: { //请求参数，接口是借用豆瓣的开放api
                q: 'java' 
            }
        }).then(res => {
            if (res.status == 200) { //条件根据用户的配置来调整
                require('./.../theme.sass'); // 引用sass
            }
        })
        const vm = new Vue({
            el: '#app',
            router,
            store,
            render: h => h(App)
        });

亲测通过，引用的代码有点多

Answer 2

gulp 根据sass 配置文件 也就是 颜色全局变量， 打包出三套皮肤，线上代码动态切换link src

Answer 3

有插件呢吧应该

Answer 4

只要用的是webpack构建，基本上都可以用webpack-theme-color-replacer这个插件实现动态换肤：
动态切换主题色