Vue.js で Module not found: Error: Can't resolve '' in '~' と表示される原因

とても単純なところで２日ぐらいハマったのでメモ。
ググっても同様の事例が見つからなかったので残しておきます。

事象

次のようなコンポーネントを作成しました。

App.vue

<template lang="pug">
div
</template>

<script>
export default {
};
</script>

<css scoped lang="scss">
</css>

webpackでコンパイルすると次のようなエラーが表示されます。

ERROR in ./path/to/components/App.vue
Module not found: Error: Can't resolve '' in '/path/to/components/'
resolve '' in '/path/to/components/'
  using description file: /path/to/project/package.json (relative path: ./path/to/components)
  after using description file: /path/to/project/package.json (relative path: ./path/to/components)
    using description file: /path/to/project/package.json (relative path: ./path/to/components)
      no extension
        /path/to/components/ is not a file
      .js
        /path/to/components/.js doesn't exist
      .json
        /path/to/components/.json doesn't exist
      as directory
        existing directory
          using path: /path/to/components/index
            using description file: /path/to/project/package.json (relative path: ./path/to/components/index)
              no extension
                /path/to/components/index doesn't exist
              .js
                /path/to/components/index.js doesn't exist
              .json
                /path/to/components/index.json doesn't exist

原因

styleと書かないと行けない箇所をcssと記載していました。
次のように修正することで解決しました。

App.vue

<template lang="pug">
</template>

<script>
export default {
};
</script>

<style scoped lang="scss">
</style>