HOME
blog
tokuyasu
npm install node-sass(yarn add node-sass)で、エラーが出てしまう件について

ブログblog

npm install node-sass(yarn add node-sass)で、エラーが出てしまう件について

Writer： tokuyasu　更新日：2023/09/11

こんにちは、デジナーレ福岡オフィスの徳安です。

Reactにsassをインストールしようとした際に、

エラーが発生してしまいました。

同様のエラーについてのブログが見当たらなかったため、

今回解消した方法を備忘録として記述します。

環境
Sass
今回発生したエラー
Node-sass
Dart-sass
インストール

環境

Reactのバージョン確認方法

// コマンド
npm list --depth=0

1 2	// コマンド npm list --depth=0

結果↓
my-app C:\Users\my-app
├── react-dom@18.2.0
├── react-scripts@5.0.1
└── react@18.2.0

結果↓

my-app C:\Users\my-app

├── react-dom@18.2.0

├── react-scripts@5.0.1

└── react@18.2.0

Sass

SassはCSSの拡張言語で、

効率的で簡単なスタイルシートの記述が可能。

変数や条件分岐も使用でき、

ネストして記述することもできる為、

少ないコードで記述が可能。

SCSS構文(SCSS)と

インデント構文(SASS)の

2つが存在するが

基本的にSCSS構文(SCSS)で記述する

記述方法が使われることが多い。

今回発生したエラー内容

Reactでsassを使用するため、

<!-- npmの場合 -->
$ npm install node-sass

1 2	<!-- npmの場合 --> $ npm install node-sass

<!-- yarnの場合 -->
$ yarn add node-sass

1 2	<!-- yarnの場合 --> $ yarn add node-sass

上記コマンドを使用したところ、

エラーが発生。

～省略～

npm ERR! gyp ERR! find Python **********************************************************
npm ERR! gyp ERR! find Python You need to install the latest version of Python.
npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,
npm ERR! gyp ERR! find Python you can try one of the following options:
npm ERR! gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe"
npm ERR! gyp ERR! find Python   (accepted by both node-gyp and npm)
npm ERR! gyp ERR! find Python - Set the environment variable PYTHON
npm ERR! gyp ERR! find Python - Set the npm configuration variable python:
npm ERR! gyp ERR! find Python   npm config set python "C:\Path\To\python.exe"
npm ERR! gyp ERR! find Python For more information consult the documentation at:
npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation
npm ERR! gyp ERR! find Python **********************************************************

npm ERR! gyp ERR! cwd C:\Users\my-app\node_modules\node-sass 　　←『作成したアプリ名』
npm ERR! gyp ERR! node -v v18.17.0
npm ERR! gyp ERR! node-gyp -v v8.4.1
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

～省略～

npm ERR! gyp ERR! find Python **********************************************************

npm ERR! gyp ERR! find Python You need to install the latest version of Python.

npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,

npm ERR! gyp ERR! find Python you can try one of the following options:

npm ERR! gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe"

npm ERR! gyp ERR! find Python (accepted by both node-gyp and npm)

npm ERR! gyp ERR! find Python - Set the environment variable PYTHON

npm ERR! gyp ERR! find Python - Set the npm configuration variable python:

npm ERR! gyp ERR! find Python npm config set python "C:\Path\To\python.exe"

npm ERR! gyp ERR! find Python For more information consult the documentation at:

npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installation

npm ERR! gyp ERR! find Python **********************************************************

npm ERR! gyp ERR! cwd C:\Users\my-app\node_modules\node-sass 　　←『作成したアプリ名』

npm ERR! gyp ERR! node -v v18.17.0

npm ERR! gyp ERR! node-gyp -v v8.4.1

npm ERR! gyp ERR! not ok

npm ERR! Build failed with error code: 1

調べてみたところ、

node-sassをサポートしている

node.jsのバージョンが異なること

によるエラーということが判明。

今回のエラーに関する検索結果が少なく、

参考にしたサイト通りに環境を整えようとするが、

意図せずnodeをダウングレードしそうになり、

node-sassについて改めて調べ直してみる。

Node-sass

Node-sassは、

Node.jsを使ってSassをコンパイル

するためのツール。

Node-sassは、

C/C++で書かれたLibSassを使用している。

しかし2020年10月～非推奨となっているため、

これからはDart-sassを使用する方が良い。

Dart-sass

Dart-sassはDart言語で実装されている。

Node-sassは開発が停止しているため、

新規プロジェクトでは

Dart-sassを使用することが推奨

されている。

参考サイト　https://www.npmjs.com/package/node-sass

このように記載されていたため、

Node-sassでなくDart-sassをインストールする。

インストール

<!-- npmの場合 -->
$ npm install sass

1 2	<!-- npmの場合 --> $ npm install sass

<!-- yarnの場合 -->
$ yarn add sass

1 2	<!-- yarnの場合 --> $ yarn add sass

上記コマンドで、インストール完了。

検索した際に、

node-sassを使用を推奨していたり、

nodeのバージョンを変更するものなどあった為、

備忘録として記述しました。

ここまで読み進めていただきありがとうございます。

tokuyasuの
他の記事を読む

【React】カスタムフックについて

2024/11/07
【React】useEffectを使用するべき場所なのか

2024/06/07

tokuyasuの記事一覧

スタッフブログ一覧