Vue-CLI + webpackでscssをビルドするときのつまずき

abstract

Vue-CLIに限った話ではないかもしれないですが、Vue-CLIにsassを導入しようとしてつまづいたところの覚え書きです。

$npm i sass-loader node-sass

でscssを使おうとしたところ、ビルドエラーが発生。

結論から言うと、主な原因は下記の通りでした。

• node.jsのバージョンが新しすぎる
• css-loaderのバージョンが新しすぎる
• その他バージョンの互換性

ここでは以上3つの対処法を記載します。

node.jsのバージョンが新しすぎる

筆者の場合v14でしたが、nodeのバージョンが新しすぎるととnode-sassが動作しなくなる。
なのでnode-sassが動くバージョンにnode.jsをダウングレード。
筆者はv11.15.0にしました。

バージョン確認

$node -v

nodeのバージョンを切り替える

新しすぎるようであればバージョンを切り替えます。
なお、node.jsはアンインストールしなくてもバージョンのみ切り替えることができます。

現在installされているバージョンを確認する

$ nodebrew ls
v11.15.0
v13.9.0
v14.15.1

current: v14.15.1

currentが今現在のバージョンです。

切り替えたいバージョンがない場合はinstallします。

$ nodebrew install <version>

バージョンの切り替え

$ nodebrew use v11.15.0

確認

$node -v
v11.15.0

公式ドキュメント：https://github.com/hokaccha/nodebrew

css-loaderが新しすぎる

css-loaderのバージョンが新しすぎると動かないようです。
今回はv2をインストールしなおします。

アンインストール

$npm uninstall css-loader

再インストール

$npm i css-loader@2.0.0

確認

すみません。
ここは自分でも理解できないのですが、下記コマンドでバージョンを確認すると5.0.1となっていました。

$npm view css-loader version
5.0.1

しかし、package.jsonを確認すると2.0になっています。

package.json

// 抜粋
{
  "dependencies": {
    "css-loader": "^2.0.0",
  },
}

結果的には、上記の工程でv.2.0をインストールすることでビルド時のエラーを解消できました。
※なにかわかる方がいましたら、教えてください🙇‍♂️

その他のバージョンの互換性

その他インストールしたパッケージのバージョンは下記の通りです。

$npm i sass-loader@7.3.1
$npm i node-sass@4.13

おわり

同じ境遇にあった人は少ないかもしれません。
調べるのに時間がかかったので、誰かの役に立てれば幸いです。