vueの単一コンポーネントファイル内のcssが読み込めなかった。
少しつまづいたのでメモ程度に
普段はrails使ってるけれども、webpack4系が使いたくなったのでちょっとサーバーレスでvue書いてみて、慣れようかなーと最近やってます。
基本webpackerばかり使ってたからwebpackのお勉強も兼ねてやってるんだけれども、慣れてないせいかうまくいかないことも多い。
特にバージョン違いで入れるもの入れないものが結構異なってきて、そこでつまづく。
ネタバレだけど、タイトルの件もそのうちの一つだった。
とりあえず環境の構築として、github pageにSPAでデプロイしようかなーと思い
この辺を参考に進めてた。
"@vue/test-utils": "^1.0.0-beta.29",
"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",
一応入れたものはこの通り。( 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」∠)_
