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

Question

I run VueJS, I started my code with the original Vue Loader Example , and I tested the launch npm run devor npm run build, but the question arises: is there a way to place all css from components in one place (for example, styles.min.css).

I added bootstrap as dependencies in my package.json, but when I do a npm run build, I can find the build.js file in distthat is all.

Thank you for your help.

Answer 1

There is a plugin for

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

and then configure it in webpack.config.js file

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")
  ]
}