Vue.js + Webpack multiple style tas output

Question

I have several vue.js components, written in single page component format.

For each .vue file, I have less written specific for that page.

After bundling, I have several style tags, which populate the global style space. Thus, some of my classes are overlapping on different pages.

Is this the intended functionality with vue.js and webpack?

Dan Mindru · Accepted Answer · 2016-10-23 03:01:13Z

4

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.

answered Oct 23, 2016 at 3:01

Dan Mindru

6,1244 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nathan Strutz Over a year ago

Thanks for this answer. I realize we're 1.5 years past. Webpack 4 is out and it doesn't allow the vue object in the root export like you have. How does this work now?

Dan Mindru Over a year ago

Should use vue-style-loader nowadays, take a look here: vue-loader.vuejs.org/guide/pre-processors.html

Collectives™ on Stack Overflow

Vue.js + Webpack multiple style tas output

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related