VueでCSS Modulesを使っているCSSファイルをインポートする方法

styleを外部ファイルからインポートする

公式サイトに書いてある、ソースのインポート方法。
しかし、CSS Modulesを使っている場合、上のような書き方では、ネストしたスタイルが反映されません。

<template>
  <div class="example">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style src="./style.css" module></style>

style.css

.example {
  # ネストしたPタグへのスタイルは反映されない。
  & p {
    color: red;
  }
}

対応策

CSS Modules使う場合は以下のように、外部CSSをインポートしましょう

<template>
  <div class="example">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style module>
  @import './style.css';
</style>