A webpack loader for supporting multi-site theming with Vue.js
Give styleblocks in Vue's single file components a theme attribute. Specify which theme you want to build for via an option to vue-theme-loader
. All other unmatching themed style blocks will be removed.
In this example there is one non-themed block and two themed. Setting the theme option to brand1
removes the brand2
themed styleblock.
Before
<!-- Vue single component file -->
<style>
button {
border: 1px solid black;
}
</style>
<style theme="brand1">
button {
color: red;
}
</style>
<style theme="brand2">
button {
color: blue;
}
</style>
After (with the theme
option set to brand1)
<!-- Vue single component file -->
<style>
button {
border: 1px solid black;
}
</style>
<style theme="brand1">
button {
color: red;
}
</style>
Configuring webpack
It's important to remember that webpack resolves loaders from right to left so vue-theme-loader
must always go under vue-loader
.
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader'
},
{
loader: 'vue-theme-loader',
options: {
theme: 'brand1'
}
}
]
}
]
}
};