https://github.com/zephraph/vue-theme-loader
A webpack loader for supporting multi-site theming with Vue.js
https://github.com/zephraph/vue-theme-loader
theme vue vue-theme-loader webpack-loader
Last synced: 7 months ago
JSON representation
A webpack loader for supporting multi-site theming with Vue.js
- Host: GitHub
- URL: https://github.com/zephraph/vue-theme-loader
- Owner: zephraph
- License: mit
- Created: 2017-02-10T01:13:39.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-10-03T21:22:01.000Z (over 6 years ago)
- Last Synced: 2024-12-10T03:40:37.439Z (over 1 year ago)
- Topics: theme, vue, vue-theme-loader, webpack-loader
- Language: TypeScript
- Size: 1.12 MB
- Stars: 105
- Watchers: 3
- Forks: 5
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-theme-loader [](https://greenkeeper.io/)
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
button {
border: 1px solid black;
}
button {
color: red;
}
button {
color: blue;
}
```
*After* (with the `theme` option set to brand1)
```vue
button {
border: 1px solid black;
}
button {
color: red;
}
```
## 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`.
```js
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader'
},
{
loader: 'vue-theme-loader',
options: {
theme: 'brand1'
}
}
]
}
]
}
};
```