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中，混到一起了，这样还复用个毛啊。。。
build/webpack.base.conf.js中有开关，能启用extract-text-webpack-plugin插件，我试过启用

// vue-loader.conf.js
module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: true // 这儿原本是isProduction，我给修改成true，打开extract开关 }), ... } // webpack.base.conf.js plugins: [ new ExtractTextWebpackPlugin('common.css') ]

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

那么问题来了，挖掘，哦不对,是怎么配置webpack，才能实现：组件中以import引入css文件，该css文件独立打包，并以在生成的<link href='******'>的形式引入呢？

如果你不想被打包，那就没必要在js中引入了，直接在index.html页面上<link href='******'>就好，对于大小而言，请求两个单独css文件，可能比单独请求一个合并的css文件消耗更大的带宽，而且增加了网络请求数量，所以上线阶段合并是更好的选择。上线版应该侧重点于减少网络请求量，提升加载速度，开发版才应该侧重于代码美观。

转载于:https://www.cnblogs.com/woniubushinide/p/8328985.html