【wepbak】vue&type=style&index=0&lang=css

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 に設定を記述する。

1. インストール

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

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

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

3. 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 なども利用可能です。