I am trying to use an external file where I have declared all app colors in variables.

colors.css

:root {
  --customColor: #c3c3c3;
}

This file would be imported to each component with an import, using postcss-import. The problem I have is that webpack does not detect changes in this external file, so the hot loader does not work when I modify the css file.

Anyone know what I can do, or where to modify webpack? I can not find information in the documentation or the issues.

custom component

<template>
  <div id='app'>Test</div>
</template>

<script>
  export default {
    name: 'app',
    components: {}
  }
</script>

<style>
  @import './styles/colors.css';

  #app {
    color: var(--othercolor);
  }
</style>