are as follows: there are three versions of the
page, and different versions have different theme colors and background images. How to configure sass, in vue after the package is completed, then modify the skin according to the parameters passed in the background
pass parameters in the background, which roughly means that users can personalize the configuration. Theme colors and backgrounds can be written in a separate sass,. You can use Vue.http to request a theme parameter before new a vm instance. In the entry file, you can use if () conditions to 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: '-sharpapp',
router,
store,
render: h => h(App)
});
personal test passed, and a little more code was referenced
gulp packages three sets of skins according to the sass configuration file, that is, color global variables. Online code dynamically switches link src
there should be a plug-in
as long as it is built with webpack, basically you can use the webpack-theme-color-replacer plug-in to dynamically change skin:
dynamically switch theme color
Previous: Cross-domain problem occurs in ionic1 real machine iOS
Next: Js filters arrays based on obj (multiple conditional arrays)
<div class="divModule" v-drag="getData" :id="element.id" v-for="(element,index) in tags" :key="index" style="width:200px;height:200px"> <divModule :id="index+1" :...
vuePress config.js how to configure sass to implement public components to call public styles, public methods. the official document description is too vague. https: vuepress.vuejs.org co. module.exports = { title: , description: Just ...
package using webpack and sass this @ media attribute is placed in two scss files, but only one of them is valid. How to make @ media valid in both files @media screen and (max-width: 750px) { * body{ background: -sharpf00;} * .footer_div ...
1 demand: according to the selected theme color, automatically switch the current theme 2 idea: I use sass to do a mixin, to change the color according to different parameters, but now it is also my css pass what value, he shows what is written dead, if...
< H1 > use styleResources in nuxt.config.js to introduce public scss file, variable error < H1 > error in . layouts default.vue?vue&type=style&index=0&id=314f53c6&lang=scss&scoped=true& Module build failed (from . node_module...
problem description after the elementUI sums up the column, if there are many items in the column, a scroll bar will appear, and the scroll bar will be above the total row. Our test has given me a bug, for details, please see the following figure . t...
as the title shows, in ios, if it is a form page, the keyboard will stretch the page (using fixed) after it pops up, and the user can see the content covered by the keyboard. Originally, this experience is very good, but after testing, it is found that ...