How can I extract CSS from .vue files?

[martynchamberlin]

I'm using Webpack 1.x and trying to extract <style> from .vue files into a dedicated CSS file. Today I'm trying to integrate happypack into this setup.

Here's the code from the vue-loader docs on how to do this, apart from happypack:

var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
    ]
  },
  vue: {
    loaders: {
      css: ExtractTextPlugin.extract("css"),
      // you can also include <style lang="less"> or other langauges
      less: ExtractTextPlugin.extract("css!less")
    }
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

Is there a way to translate this into happypack? I've looked at your complex example here but it doesn't seem complete and I can't tell if you're actually lifting CSS from JSX files or not.

The big problem is that once you go the route of using happypack, the vue object in the code block above gets completely ignored. We need to be using the vue-loader but also somehow passing this vue object. Just can't figure out a way to do this in happypack.

Would welcome any tips on this! Thanks.

[amireh]

The problem with the vue object in your configuration is that it can't be serialized and communicated across processes since it contains functions. Only JSON-serializable options are supported. If vue-loader accepted a file path to a config file (like babel does with .babelrc and postcss loader and so on) which it would then require then it can work.

Having said that, you can instruct happypack to expose custom keys from the compiler configuration object by monkey-patching HappyPack.SERIALIZABLE_OPTIONS:

// @file: webpack.config.js
const HappyPack = require('happypack');
HappyPack.SERIALIZABLE_OPTIONS.push('vue')

But that still wouldn't work since you have functions within that object.

[martynchamberlin]

Actually it DOES work. No idea why. Probably because the object gets computed before it is pushed. Thank you so much.

[martynchamberlin]

This working flawlessly so I'm going to close this issue. Thanks @amireh!