scssをコンパイルしてみる

SCSSをコンパイルしたいと思って色々と調べてみたところ、nodeとnpmでできそうでしたのでやってみます。

1. インストール

まずはnodeが入っているか確認します。

node -v

つぎにnpmが入っているかも確認します。

npm -v

両方とも入っていたら、次に初期化します。

npm init

色々聞いてくるので、全部「Enter」を押していきます。
これで「package.json」ができました。ここまでが事前準備みたいですね。

つぎにsassの設定をします。「node-sass」というライブラリをインストールするようですね。

npm install node-sass --save-dev

2. 設定

次にscssファイルを用意します。
ディレクトリはこんな感じにしました。

|- node_modules
|- package-lock.json
|- package.json
|- css（出力先）
|- scss（元ファイル）

次にscssコンパイルを実行するためにpackage.jsonを変更する必要があるみたいですね。

{
  "name": "demo_scss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "scss": "node-sass scss/import.scss css/style.css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^9.0.0"
  }
}

“scripts”に”scss”を追加しました。これで「npm run scss」と入力すれば、「scss/import.scss」を「css/style.css」にコンパイルできるようになりました。

3. コンパイル実行

コマンドから実行してみます。

npm run scss

cssディレクトリに「style.css」が書き込まれていました！これで成功です。

今回は以上です！