分离vue组件内部css

当我们使用vue组件的时候,使用webpack打包的时候,默认会把vue组件内部的css打包到页面上,但是打包到页面上很丑陋,所以我们希望可以把vue组件内部的css抽离到css文件中，使用vue-style-loader可以实现:

{
 test: /\.vue$/,
  use: [{
   loader: "vue-loader",
   options: {
    loaders: {
     css: ExtractTextPlugin.extract({
      loader: ['css-loader'],
      fallbackLoader: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
     }),
     less:ExtractTextPlugin.extract({
      loader: ['css-loader','less-loader'],
      fallbackLoader: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
    })
   }
  }
}],

}