Vue-loader: Style in async components can't extract to single CSS file.

[wxkuang]

Hi,

I'm using webpack & vue-loader to help my work and they are pretty awsome. But now I was confused by a problem: The style I wrote in async components can't extract to a CSS file. And I noticed that the style was packed into JS file like 1.app.js, etc. BTW, these style can not take effect. I can't see them in anywhere except 1.app.js.

This is a sinppet of my webpack.config.js:

    module: {
        loaders: [{
            test: /\.vue$/,
            loader: 'vue'
        }
        // ...
        // Other loader config.
        }]
    },
    vue: {
        loaders: {
            css: ExtractTextPlugin.extract("css"),
            less: ExtractTextPlugin.extract("css!less")
        }
    },
    plugins: [
        new ExtractTextPlugin("style.css"),
        new webpack.optimize.CommonsChunkPlugin("libs", "libs.js")
    ]

My Vue-Router config:

router.map({
    '/home': {
        component: HomeView
    },
    '/search': {
        component: function(resolve) {
            require(['./components/SearchView.vue'], resolve); // <style> in this file was gone! T_T
        }
    }
});

There is a similar issue #105 but it isn't resolve.

Thanks.

[yyx990803]

They are not extracted because they shouldn't. It's more efficient to inline those styles for async chunks, because if you extract them, you will end up with many small CSS files, and one additional HTTP request for every chunk.

Also this is more like a https://github.com/webpack/extract-text-webpack-plugin question instead of vue-loader question.

[beriahthebee]

Well that is highly opinionated answer and I don't think in line with what the OP is originally pointing out. Yes adding another request would not be beneficial, but adding that CSS to a single "all app" css file is desired at times and certainly an acceptable solution.