zephraph / Vue Theme Loader
Licence: mit
A webpack loader for supporting multi-site theming with Vue.js
Stars: ✭ 109
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Vue Theme Loader
Sketch Loader
Webpack loader for Sketch (+43) files
Stars: ✭ 69 (-36.7%)
Mutual labels: webpack-loader
Webpack Core Usage
webpack2完整系列课程,欢迎阅读。同时欢迎移步我的react全家桶文章全集: https://github.com/liangklfangl/react-article-bucket
Stars: ✭ 94 (-13.76%)
Mutual labels: webpack-loader
Svg Sprite Webpack Plugin
Webpack plugin for loading/extracting SVGs into a sprite file
Stars: ✭ 73 (-33.03%)
Mutual labels: webpack-loader
Vue Md Loader
✨ Markdown files to ALIVE Vue components.
Stars: ✭ 78 (-28.44%)
Mutual labels: webpack-loader
Ignore Loader
Webpack loader to ignore certain package on build.
Stars: ✭ 85 (-22.02%)
Mutual labels: webpack-loader
Laravel Localization Loader
Laravel Localization loader for webpack. Convert Laravel Translation strings to JavaScript Objects.
Stars: ✭ 58 (-46.79%)
Mutual labels: webpack-loader
Webpack Component Loader
📦 A webpack loader to componentify CSS/JS/HTML without framework
Stars: ✭ 105 (-3.67%)
Mutual labels: webpack-loader
Webpack Conditional Loader
C conditionals directive for JavaScript
Stars: ✭ 93 (-14.68%)
Mutual labels: webpack-loader
Graphql Persisted Document Loader
Webpack loader that adds a documentId to a compiled graphql document, which can be used when persisting/retrieving documents
Stars: ✭ 74 (-32.11%)
Mutual labels: webpack-loader
Worker Loader
A webpack loader that registers a script as a Web Worker
Stars: ✭ 1,284 (+1077.98%)
Mutual labels: webpack-loader
Jshint Loader
[DEPRECATED] jshint loader for webpack, please migrate on `eslint`
Stars: ✭ 69 (-36.7%)
Mutual labels: webpack-loader
Url Loader
A loader for webpack which transforms files into base64 URIs
Stars: ✭ 1,361 (+1148.62%)
Mutual labels: webpack-loader
Isomorphine
Require server-side modules from the browser, remotely.
Stars: ✭ 66 (-39.45%)
Mutual labels: webpack-loader
Graphql Import Loader
Webpack loader for `graphql-import`
Stars: ✭ 84 (-22.94%)
Mutual labels: webpack-loader
Webpack Tools
☕️Just a simple webpack sample project.
Stars: ✭ 106 (-2.75%)
Mutual labels: webpack-loader
Vue Svg Inline Loader
Webpack loader used for inline replacement of SVG images with actual content of SVG files in Vue projects.
Stars: ✭ 105 (-3.67%)
Mutual labels: webpack-loader
Css Modules Flow Types
Creates flow type definitions from CSS Modules files using Webpack loader or CLI 👾
Stars: ✭ 92 (-15.6%)
Mutual labels: webpack-loader
vue-theme-loader
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'
}
}
]
}
]
}
};
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].