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!

@DaniAkash no, I didn't find anything in output js bundle for the page that imported Modal. Just js, actually it works but without css. — Hola, Apr 11 '17 at 05:12
add the css to your `main.js` like `require('path/to/css')` or use `style scoped` in the modal component. — Amresh Venugopal, Apr 11 '17 at 05:59
looks like you have also tried extract-text-webpack-plugin, it didn't extract the CSS file? — Dani Akash, Apr 11 '17 at 06:35
@AmreshVenugopal No, thats why I posted this issue here. output.css doesn't contains css for modal. It contains only if both pages (entry files) imported modal.vue — Hola, Apr 11 '17 at 06:49
@DaniAkash Nope, css output doesn't contains css for modal. It contains only if both pages (entry files) imported modal.vue — Hola, Apr 11 '17 at 06:50
@AmreshVenugopal I use this modal component https://github.com/JosephusPaye/Keen-UI/blob/master/src/UiModal.vue — Hola, Apr 11 '17 at 07:37
Do you have `vue-template-compiler` in your project? Its needed to be fetched manually to work with webpack. — magnudae, Apr 11 '17 at 08:10

score 1 · Accepted Answer · answered Apr 11 '17 at 10:23

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'
        })
      }
    }
  }

score 0 · Answer 2 · answered Apr 11 '17 at 06:43

0

Webpack needs vue-loader to handle Vue components.

answered Apr 11 '17 at 06:43

Lars Beck

3,446
2
22
23

Do you even saw my config? It does vue-loader, isn't? – Hola Apr 11 '17 at 06:51
I just saw `vue-style-loader`, my fault ;-) – Lars Beck Apr 11 '17 at 06:55
it also has vue-loader – Hola Apr 11 '17 at 07:36

Webpack 2 doesn't compile css inside of vue files

2 Answers2