vue引入外部.css文件，webpack將其與.vue中的樣式混合打包了，怎么辦？

先說明一下我遇到的問題：
我使用vue-cli搭自己的博客，希望引入公共樣式：

// main.js
import './assets/styles/common.css'

我本來是希望webpack打包后，能將這個樣式獨立打包，在生成的html文件中用<link href='/static/css/common.css'>這樣的形式引入，這樣瀏覽器就能緩存，各個頁面需要的話就import一下，也不用重新加載了，可是誰知道，webpack將我的common.css文件打包到了app.css中，混到一起了，這樣還復(fù)用個毛啊。。。
build/webpack.base.conf.js中有開關(guān)，能啟用extract-text-webpack-plugin插件，我試過啟用

// vue-loader.conf.js
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: true  // 這兒原本是isProduction，我給修改成true，打開extract開關(guān)
  }),
  ...
}


// webpack.base.conf.js
plugins: [
  new ExtractTextWebpackPlugin('common.css')
]

然而并沒有什么卵用，還是把我的common.css混到app.css中了。。。（下圖為npm run build后得到的css文件）

那么問題來了，挖掘，哦不對,是怎么配置webpack，才能實現(xiàn)：組件中以import引入css文件，該css文件獨立打包，并以在生成的<link href='******'>的形式引入呢？