CODEWITHSUNDEEP
csswebpacklessvue.js
cching
cching

Reputation: 799

Vue.js + Webpack multiple style tas output

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.

Head

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

Upvotes: 3

Views: 4057

Answers (1)

Dan Mindru
Dan Mindru

Reputation: 6104

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.

Upvotes: 4

Related Questions