[Vuejs]-Webpack + vue-loader + postcss-modules results in empty $style object

by

0👍

Found a workaround: manually import the styles from the JSON file.
If anyone knows a better way please let me know 🙂

hello.vue.json

{"hello":"_hello_fgtjb_30"}

hello.vue

<template>
  <div :class="style.hello">
    Hello World!
  </div>
</template>

<script>
import style from "./hello.vue.json";

export default {
  name: "hello",
  beforeCreate() {
    this.style = style;
  },
  created() {
    console.log(this.style);
  }
};
</script>

<style module>
.hello {
  background: lime;
}
</style>

This only works when using postcss-modules (loaded from config by postcss-loader in my case) instead of using modules: true:

{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: "css-loader",
      options: {
        importLoaders: 1
      }
    },
    "postcss-loader"
  ]
};

See this PR as a full example.

Leave a comment