ぎんさんマインド

いち弱小エンジニアの思考とか趣味についてつらつらと書いてみるかもしれない。

vueの単一コンポーネントファイル内のcssが読み込めなかった。

少しつまづいたのでメモ程度に

普段はrails使ってるけれども、webpack4系が使いたくなったのでちょっとサーバーレスでvue書いてみて、慣れようかなーと最近やってます。

基本webpackerばかり使ってたからwebpackのお勉強も兼ねてやってるんだけれども、慣れてないせいかうまくいかないことも多い。

特にバージョン違いで入れるもの入れないものが結構異なってきて、そこでつまづく。

 

ネタバレだけど、タイトルの件もそのうちの一つだった。

とりあえず環境の構築として、github pageにSPAでデプロイしようかなーと思い

qiita.com

この辺を参考に進めてた。

"@vue/test-utils": "^1.0.0-beta.29",
"css-loader": "^2.1.0",
"gh-pages": "^1.2.0",
"jest": "^24.1.0",
 
"vue": "^2.5.17",
"vue-loader": "^15.6.2",
"vue-lodash": "^2.0.0",
"webpack-dev-server": "^3.1.14"
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.17.1",
"webpack-cli": "^3.2.3"

一応入れたものはこの通り。( GitHub - ImpureSilver11/othello: GitHub Pages Sample. ここで作ってる。)

で、書いていたらbuildするときに

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

 って怒られた。

まだvueよくわかってなかったからメッセージの読み方もよくわかってなかったけれど、色々調べてみると、

vue-loaderの14系と15系だとstylesheetの読み込み方が違うみたいね。

https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes

これの通りにwebpack.config.jsに下のruleを追加した

module: {

 rules: [

  {

   test: /\.less$/,

   use: [

    'vue-style-loader',

    'css-loader',

    'less-loader'

   ]

  }

 ]

}

で、見てみると、vue-loader@15系だとstyleは.lessとして読み込まれるのかな?で、私の場合はless-loaderがなかったので、その辺で怒られてたと。

 

そもそも普段scss使ってて、lessとか知らなかったよ…

もうちっとフロントに強くならんとなーと思う_(:3」∠)_