How to place all the css code from .vue files into one .css file?

Question

I'm starting VueJS, I started my code from the original Vue Loader Example and I tested running npm run dev or npm run build but a question emerge : Is there a way to place all the css from the components in one place (like styles.min.css).

I added bootstrap as dependencies in my package.json and but when I do a npm run build I can only find the build.js file in dist, that's all.

Thank you for your help.

Answer 1

There's a plugin for that

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

and then configure it in your 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")
  ]
}