今回はSassをコンパイルできる開発環境を作る方法を解説します。Compilerを使ってSassをコンパイルしました。Compilerを使ったコンパイルは実務ではほぼ使いません。チームで開発を進めるときやWeb制作会社の現場では必ず「Sassをコンパイルできる開発環境」を準備します。今回はその開発環境を作る方法を解説します。これからWeb制作会社に転職したい人や制作の現場でやっていきたい方には必修科目だと思うのでぜひ覚えて帰ってください。本題に入る前にちょっとだけ前置き。Compilerなどの便利なツールを使わないのか?結論、個人の環境に依存してしまうためです。複数人で開発を進める場合は、利用するツールなどが個人の環境に依存しないことが第一条件です。ある人はVscodeではなくAtomを使っているかもしれません。ある人はSassのコンパイルに独自の環境を利用しているかもしれません。いったことがあるため、なるべく個人の環境に依存しない、誰の環境で見ても同じ内容が再現できる開発環境が求められるんです。compilerは設定によって出力するフォルダが違ったり、動かないことがあります。他の人の環境で実行したらエラーが起きた、みたいなことが発生するんですよね。これから紹介する方法は、開発者ならみなさん普段から使っているものです。誰の開発環境でも同じ内容が再現できます。前置きが長くなりました。コンパイルできる環境を作っていきまっす。全体の手順は下記です。事前準備npmで【Sass】パッケージをインストールするコンパイルすためのコマンドを記述たぶんNode.jsに触ったことがない人からしたら訳が分からなくなりそうですが、1個ずつきちんと解説します。手順1:事前準備Node.jsをインストールするまず、開発環境をつくるためにNode.jsというものをインストールする必要があります。Node.jsとは?Node.jsは自身のパソコン上で実行できるJavascript実行環境です。...多分意味わからないと思いますが大丈夫です。「開発環境をつくるために必要なんだな」くらいの理解でOKです。Node.jsについてわかりやすい記事があったので気になる方は下記参照。QiitaQiitaNode.jsは公式サイトからインストールできます。下記サイトから手順に従ってインストールしてください。Node.jsNode.js自分のOSに合わせてクリックしてください。インストールしたらインストールファイルを実行してインストールします。以降は画面の指示に従ってインストールしていきます。あとはきちんとインストールできたか確認しましょう。ターミナルを開いて下記のコマンドを打ってください。-vそうしたらNode.jsのバージョンが表示されるはずですきちんとバージョンが表示されたらインストールは無事完了です。次いきましょプロジェクトフォルダを準備する次に今回のプロジェクトフォルダを作ります。名前は何でもいいです。フォルダの中にはsrc/style.scssをつくっておきます。この記事ではディレクトリ構成を下記の形で進めます。index.html(任意)手順2:npmで「Sass」パッケージをインストールする次にnpmパッケージをインストールします。ターミナル上で下記を入力し実行します。-yそうするとpackage.jsonというファイルがフォルダ内に作られたと思います。次に、Sassを使うためのパッケージをインストールします。ターミナル上で下記コマンドを実行してください。sassそうすると、フォルダ内に、node_modulesとpackage-lock.jsonが生成されます。package.jsonを開き、「devDependencies」を確認するとsassが入っているはず。インストールしたパッケージはこのようにpackage.jsonから確認できます。手順3:コンパイルするためのコマンドを記述ここまでで下準備はOKです。実際にSassをコンパイルしていきます。インストールしたパッケージを使うにはコマンドラインから操作する必要があります。package.jsonを開いて、scriptsの{}内にパッケージを実行させるコマンドを書きます。下記をscriptsのところに置き換えてコピペしてください。css/style.css"},置き換え後のpackage.jsonコピペできましたか?コピペできたらとりあえず一回動かしてみましょう。sass上記コマンドをターミナル上で実行してみてください。実行するとコンパイルされることがわかると思います。package.jsonへのコマンド追加package.json内のscriptsにコマンドを追加しましたね。追加したコマンドはインストールしたSassのコンパイルコマンドです。Sassコマンドの構文Sassの構文は以下の通り。[出力するファイル指定]上記を実行することで、SCSSファイルのコンパイルができます。ちなみにオプションとかはいろいろあるので、どこかのタイミングでまとめようと思います。動かすのが基本的です。詳しくは以下の記事が参考になります。MEDIAまとめSassのコンパイル環境を作る方法を解説していきました。何度も言いますが、実際の現場では本記事で紹介した方法が主流なことが多いです。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。【激ヤバ】高卒工場勤務が「人生終わってる」といわれる理由5つサイト管理人づみ元工場勤務のWebディレクター。現在はWeb制作会社に勤めながら兼業でWeb制作事業を営んでいます。工場退職→フリーのWebライターに転身。→コーディング・プログラミングを独学で学ぶ→Web制作会社に入社。兼業でWeb制作事業。