3

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?

cching
  • 789
  • 1
  • 8
  • 17

1 Answers1

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.

Dan Mindru
  • 5,986
  • 4
  • 28
  • 42
  • 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? – Nathan Strutz May 01 '18 at 17:44
  • 1
    Should use vue-style-loader nowadays, take a look here: https://vue-loader.vuejs.org/guide/pre-processors.html – Dan Mindru May 01 '18 at 17:50