Cannot extract css file from Vue by Webpack

Question

I am using Webpack 1.12.0 to build a Vue component. My goal is to create a [name].min.js file and [name].min.css file for my package.

I try to use extract-text-webpack-plugin to extract css to a single file and follow this instruction for Webpack 1.x: https://vue-loader.vuejs.org/en/configurations/extract-css.html

Here is my webpack.base.conf.js file:

var path = require('path')

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/',
    filename: 'build.js',
  },
  resolve: {
    extensions: ['', '.js', '.vue'],
    alias: {
      vue$: 'vue/dist/vue.common.js',
      components: path.resolve(__dirname, '../src/components'),
    },
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue',
      },
      {
        test: /\.js$/,
        loader: 'babel!eslint',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json',
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
      },
    ],
  },
}

This is my webpack.prod.conf.js file, which is used in order to create those 2 files above:

var webpack = require('webpack')
var config = require('./webpack.base.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin');

config.target = 'node'
config.output.filename = '[name].min.js'
config.output.libraryTarget = 'commonjs2'

config.entry = './src/components/[name].vue'

var SOURCE_MAP = true

config.devtool = SOURCE_MAP ? 'source-map' : false

config.vue = {
  loaders: {
    css: ExtractTextPlugin.extract("css"),
  }
},

config.plugins = (config.plugins || []).concat([
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: '"production"'
    }
  }),

  new ExtractTextPlugin("[name].min.css"),

  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  }),

  new webpack.optimize.OccurenceOrderPlugin()
])

module.exports = config

My folder structure is:

├── build
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── dist
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   │   ├── [name].vue
│   │   ├── script.js
│   │   ├── style.css
│   │   └── template.html
│   ├── index.html
│   ├── main.js
└── yarn.lock

The [name].vue file contains script.js, style.css and template.html

<template src="./template.html"></template>

<script src="./script.js"></script>

<style src="./style.css"></style>

The command to run is webpack --progress --hide-modules --config build/webpack.prod.conf.js

However, when I run this command, only [name].min.js and [name].min.js.map are created. There is no [name].min.css. What can I do to create the css file?