webpack2 vue2 在加入路由后 CSS无法提取出来！

Question

已解决 新增了

fallback: 'vue-style-loader'

但是style里的css 还是没有给我打包到单独文件里，继续找问题。

我从头弄了一个 vue2 webpack2 的demo 在没有用路由的时候。vue 文件里的css 能正常的提取出来。
我又重新复制了一份，然后加入了路由，然后vue 文件里的css 则无法使用了。不知道什么原因。

这个是没有加入路由的时候。

这个是加入路由后的情况。

我的webpack配置

/**
 * Created by truncate on 2017/3/18.
 */
const isEnv = process.env.NODE_ENV === 'production';

/**
 * 引入webpack
 * @type {webpack}
 */
const webpack = require('webpack');
/**
 * path 路径
 */
const path = require('path');
/**
 * 生成首页
 * @type {HtmlWebpackPlugin}
 */
const HTMLWebpackPlugin = require('html-webpack-plugin');
/**
 * 热更新
 * @type {string}
 */
const hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true';
/**
 * 入口文件
 * @type {string}
 */
const entry = './src/main.js';
/**
 * 分离CSS
 * @type {ExtractTextPlugin}
 */
const Ex = require('extract-text-webpack-plugin');
/**
 * CSS压缩
 * @type {OptimizeCssAssetsPlugin}
 */
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

/**
 * 公共插件
 * @type {Array}
 */
const commonPlugins = [
    // 生成首页
    new HTMLWebpackPlugin({
        title: 'vue',
        filename: './index.html',
        template: './src/template/index.html',
        inject: true
    }),
    // 热加载插件 想要自动刷新必须加
    new webpack.HotModuleReplacementPlugin(),
    // 导出 打包 CSS
    new Ex('css/[name].css'),
    // 提取公共模块, 保存指定公共 bundle 的名字。
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor'
    })
];

/**
 * 开发插件
 * @type {Array}
 */
const envPlugins = isEnv ? [
    // 指定生产环境，以便在压缩时可以让 UglifyJS 自动删除代码块内的警告语句。
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production')
    }),
    // 压缩JS代码,CSS 没有被压缩到
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),
    // CSS压缩 单独webpack 似乎没用 webpack -p 都给压缩了观察
    new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.optimize\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorOptions: { discardComments: {removeAll: true } },
        canPrint: true
    }),
] : [];

/**
 * 导出模块
 * @type {{entry: *[], output: {path: string, filename: string, publicPath: string}, module: {rules: *[]}, resolve: {alias: {vue: string}}, plugins: *[]}}
 */
module.exports = {
    //入口文件
    entry: [entry, hotMiddlewareScript],
    output: {
        path: __dirname + '/dist',
        filename: '[name].js?[hash]', //编译后文件名
        publicPath: '/',
        //libraryTarget: "umd" // 组件采用UMD格式打包
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                //use: ["vue-loader"],
                //如果想要分离vue里面的Style css用以下配置
                use: {
                    loader: "vue-loader",
                    options: {
                        loaders: {
                            css: Ex.extract({
                                use: 'css-loader'
                            }),
                            stylus: Ex.extract({
                                use: ["css-loader", "stylus-loader"]
                            }),
                            less: Ex.extract({
                                use: ["css-loader", "less-loader"]
                            }),
                            sass: Ex.extract({
                                use: ["css-loader", "sass-loader"]
                            })
                        }
                    }
                }
            },
            {
                test: /\.js$/,
                use: ["babel-loader"],
                exclude: /node_modules/

            },
            {
                test: /\.html$/,
                use: ["vue-html-loader"]
            },
            {
                test: /\.styl$/,
                use: ["vue-style-loader", "css-loader", "stylus-loader"]
            },
            {
                test: /\.css$/,
                use: ["vue-style-loader", "css-loader"]
            },
            {
                test: /\.less$/,
                use: ["vue-style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.(scss|sass)$/,
                use: ["vue-style-loader", "node-sass", "css-loader", "sass-loader"]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 10000,
                        name: 'img/[name].[hash:7].[ext]'    // 将图片都放入img文件夹下，[hash:7]防缓存
                    }
                }]
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 10000,
                        name: 'fonts/[name].[hash:7].[ext]'    // 将字体放入fonts文件夹下
                    }
                }]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.vue', '.jsx'], //后缀名自动补全
        alias: {
            'vue': 'vue/dist/vue.js'
        }
    },
    //公共及开发插件
    plugins: commonPlugins.concat(envPlugins),
}

两个demo 都是同样的配置，只是一个引入的路由 一个没有引入而已。