Webpack 2 doesn't compile css inside of vue files

Question

Hello beautiful people,

I have a problem with compiling css for vue components. Here is my config file: https://gist.github.com/lavezzi1/27817a17cb4fa2a092e701089ecae0ec

I do multiple page app with vue. Everything works just fine except one thing: if I have two pages, and if they are both have imported modal import Modal from 'components/modal.vue' everything works fine, but if one haven't then the output .css file doesn't have css code for modal. How can I fix that?

My vue components look like:

<template>
...
</template>

<script>
...
</script>

<style lang="css">
   css here
</style>

Thank you for any help!

Answer 1

You should expand your vue-loader with options for compliling css.

For example:

  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        css: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                minimize: condition
              }
            }
          ],
          fallback: 'vue-style-loader'
        })
      }
    }
  }