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: about 10 hours 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 (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-10-03T21:22:01.000Z (about 5 years ago)
• Last Synced: 2024-09-02T22:19:26.682Z (about 1 month 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 [![Greenkeeper badge](https://badges.greenkeeper.io/zephraph/vue-theme-loader.svg)](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'

            }

          }

        ]

      }

    ]

  }

};

```