# 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 4年前

Tailwindcss でローディングコンポーネント作成

Tailwind css使って next.jsのグローバルローディングをカスタマイズする話...

CSS :before & :after pseudo-elements 疑似要素で画像を重ねる

css画像重ねる効果がほしかったので、cssで画像回転しながらbefore afterで工夫やってみ...

Nuxt Fontawesome アイコン使う

Font Awesome 特徴と使い方、Nuxtjs Vuejs で Font Awesome使う方...

シェアボタン SNS ソーシャルリンクの作り方

Facebook TwitterなどのSNSに記事をシェアするためのシェアボタンについて...

CSS ::-webkit-scrollbar スクロールバーをカスタマイズ

webkit系scrollbarカスタマイズ CSS 疑似要素 webkit-scrollbarにつ...

CSS background と conic-gradient で bookmark のブックマーク作る

画像使わずにcssブックマークをスタイルシートのbackgroundとconic-gradientで...

HTML 特殊文字エンティティ参照

よく使うhtml特集文字の文字実体参照と10 進数コードエンティティ参照...

html5 新タグ要素と廃止タグ要素

2008年に発表されたHTML5の規則をもとに、新しいタグ要素と機能及び廃止する機能タグなどをまとめ...

safari でボタンタップしたら影が残る怪奇現象

safariでタップしたボタンの影跡が残る現象の解決方法...

css 学習タイピング風アニメーションを css だけでやってみる

Jqueryなし！javascriptなし！CSSだけでタイピング風アニメーションは憧れでやってみま...

google color palette

google color paletteが用意してくれているから、センスなくてもきれいに配色できる...

フルスクリーン背景画像の 100%表示と iPhone 対応方法

フルスクリーン画像表示をやってみました iphone 対応も...

css フルースクリンの背景画像と透けるログイン画面

フルースクリンの背景画像あるいは背景ビデオ、プラス透けるログイン画面を作ってみました...

placeholder text-align プレースホルダーの左寄せ・右寄せ

inputのplaceholder内文字左寄せあるいは右寄せ方法、placeholderにtext-...

margin 上下効かない原因