vue&type=style&index=0&lang=css

Error | エラー

Vue の single file component に style を書き込むと以下のエラーが出ることがある。

ERROR in ./src/App.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css&) 14:3
Module parse failed: Unexpected token (14:3)
You may need an appropriate loader to handle this file type.

※ ./src/App.vue の部分はディレクトリ構造によります。

Solution | 解決方法

style-loader と css-loader をインストールし、webpack.config.js に設定を記述する。

インストール

# using npm
npm install style-loader css-loader --save-dev

# using yarn
yarn add style-loader css-loader --dev

webpack.config.js へ以下の記述を追加

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
}

single file component サンプル

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>


<script>
</script>


<style>
h1 {
  font-size: 18px;
}
</style>

Supplement | 補足

<style> は、<style scoped>とすれば data 属性が付与されたスコープされたスタイルとなる他、設定を追加すれば scss なども利用可能です。