# sass-loader エラー

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader (/Users/xxx/Documents/xxx/node_modules/sass-loader/dist/index.js:25:24)

# 解決策 1 sass-loader のバージョンが 8 以上でエラーになる

npm uninstall --save-dev sass-loader
npm install --save-dev sass-loader@7

# 解決策 2 node_module 削除してインストール

rm -rf node_modules && rm package-lock.json
npm cache clear --force && npm cache clean --force
npm install

# Node-sass エラー

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): friendly-errors 19:58:32
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

npm uninstall node-sass
npm install node-sass@4

# 結論

Node-sass は Nodejs のバージョンに依存していて、Nodejs のバージョンが合わないと node-sass や sass-loader がエラーを起こしているようで、バージョン下げるとなおりました。

node-sass (opens new window)
sass-loader (opens new window)

Nodejs ver node-sass ver Node Module
Node 15 5.0+ 88
Node 14 4.14+ 83
Node 13 4.13+, <5.0 79
Node 12 4.12+ 72
Node 11 4.10+, <5.0 67
Node 10 4.9+ 64
Node 8 4.5.3+, <5.0 57
Node <8 <5.0 <57

Sass について

ウィキペディア Sass (opens new window)

Sass のメリット いいところ

  • コードが少ない
  • コードが管理しやすい
  • 変数使える
  • 使い回しの型を定義できる
  • 条件分岐できる

Sass のデメリット 欠点

  • 環境を用意する必要がある
  • バージョンエラー発生することがある

Sass から css に変換するツール

sassmeister (opens new window)

2021-03-14
  • css

関連記事

Nuxt Fontawesome アイコン使う
シェアボタン SNS ソーシャルリンクの作り方
CSS ::-webkit-scrollbar スクロールバーをカスタマイズ
CSS background と conic-gradient で bookmark のブックマーク作る
HTML 特殊文字エンティティ参照
html5 新タグ要素と廃止タグ要素
safari でボタンタップしたら影が残る怪奇現象
css 学習 タイピング風アニメーションを css だけでやってみる
google color palette
フルスクリーン背景画像の 100%表示と iPhone 対応方法
css フルースクリンの背景画像と透けるログイン画面
placeholder text-align プレースホルダーの左寄せ・右寄せ
margin 上下効かない原因
CSS :before & :after pseudo-elements 疑似要素で画像を重ねる