Vue.Js + Webpack Multiple Style Tas Output

Vue.js + Webpack multiple style tas output

This is the default behaviour for vue-loader (which is the main plugin in the vue-webpack template).

However, if you want to you can extract all CSS into one file:

npm install extract-text-webpack-plugin --save-dev

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
    ]
  },
  vue: {
    loaders: {
      css: ExtractTextPlugin.extract("css"),
      // you can also include <style lang="less"> or other langauges
      less: ExtractTextPlugin.extract("css!less")
    }
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

Check out the docs of vue-loader regarding extraction.

how to extract vue files style into one seperate style.css file

here is one issue simillar to your problem, check it out

Url(https://stackoverflow.com/a/40199096/6381510)

but this better

 less: ExtractTextPlugin.extract({
              loader: 'css-loader!less-loader?indentedSyntax',
              fallbackLoader: 'vue-style-loader',
            }),

Vue.js modify other component's style

You can take help of dynamic styling of VueJS. You can assign a class, based on the value of a variable. So in your customNav You can have two classes: say black-bg and transp-bg and you can change this will help of a variable: blackBackground

<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem>

I think you can change this variable in two ways:

Have this as an instance data and change it based on current route.
Have this in vuex state and change in different components based on your requirement.

Vue.js modify other component's style

<YourElem v-bind:class="{ 'black-bg': blackBackground, 'transp-bg'!blackBackground}"></YourElem>

I think you can change this variable in two ways:

Have this as an instance data and change it based on current route.
Have this in vuex state and change in different components based on your requirement.

Apply :style on v-for loop only once - vue.js

I would do something like this.

replace

    this.sessionColor = sessClr;
    this.exitColor = exitClr;
    this.bounceColor = bounceClr;
    this.timeColor = timeClr;,

with

    this.json[i].sessionColor = sessClr;
    this.json[i].exitColor = exitClr;
    this.json[i].bounceColor = bounceClr;
    this.json[i].timeColor = timeClr;

and refer in the html for each entry in json like below:

<td :style="{ 'background-color': page.sessionColor }">

check this fiddle

Hope it helps.

Webpack: How can I combine two completely separate bundles using dynamic bundling

Did I understand you correctly: you have essentially got

a library of custom React components (built by Webpack build #1)
a React app that needs to use some (all) of these components (built by Webpack build #2, totally separate from #1)

If yes, then read on.

The "Is this possible in react?" question should instead be "Is this possible in Webpack?", and the answer is "Yes". The following is tested with Webpack 2, but should also work with v.1.

Let's call your projects Lib (your React component library) and App (the library consumer).

In the Lib project:

Create an entry point file, say index.js, that exports all the custom React components like this:

import {Button} from './button';
import {DatePicker} from './DatePicker';
import {TextBox} from './textBox';

export const MyComponentLib = {
    Button,
    DatePicker,
    TextBox
};

Update webpack.config.js to make the project's bundle a UMD library (could also be 'var'), and set the entry point to the above index.js file. Doing so will make your library available via a global variable named MyComponentLib (the name comes from the export above) in the consuming app later on:
```
 ...
 output: {
     path: './dist',
     filename: 'mylib.bundle.js',
     libraryTarget: 'umd'
 },
 ...
 entry: './index.js',
 ...
```

On to the App project:

In the index.html file you will have two <script> tags: one for mylib.bundle.js (the output of the Lib project), and another for the bundle of the App project itself. You might have more bundles (app, vendor etc.), I'm just simplifying things here.
Update webpack.config.js to mark the component library as external dependency. Here, MyComponentLib is, again, the name of the global variable the library is available at, and myComponents is the name to use in import statements:
```
...
externals: {
    myComponents: 'MyComponentLib'
}, 
...
```

Now, in App you can import a component like this:

import {DatePicker} from 'myComponents';

This will dynamically load DatePicker from the component library at run time via the global variable.

Bonus: if you use eslint, you don't want it to complain about missing modules that you know are external; add this to your .eslintrc:

...
"settings": {
      "import/core-modules": ["myComponents"]
},
...

Vue.Js + Webpack Multiple Style Tas Output