2020/03/30

node-sass をインストールする

CSSコンパイルは開発のみで利用するため、ローカル(devDependencies)にインストールします。


$ npm install node-sass --save-dev
//または
$ yarn install node-sass --dev

--save-dev はローカル(devDependencies)にインストールする npm コマンドオプションです。
yarn では --dev にあたります。(混乱しますが・・・)

ファイル構成

sass から css に書き出すディレクトリを構成します。

元ファイル(sass)

sources/sass/default.scss

書き出しファイル(css)

public/css/default.css

ファイル構成

npm を初期化してない場合は、新規作成します。


$ npm init

package.json

package.json の scripts に sass の設定を記述します。


"scripts": {
    "sass": "node-sass resources/sass/ --output public/css/ --output-style compressed --watch --source-map true"
}
  • compressed:css圧縮
  • --watch:監視設定(sass保存時に自動書き出し)
  • --source-map true: .css.map ファイルの書き出し/li>

CSSコンパイル


$ npm run sass

public/css/ に対象の cssファイルが書き出されます。

  2020/01/12
Node.js のバージョン管理ツール nvm のインストールメモ nvm は Node.js のバージョン管理ツールです。
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
バージョン確認
$ source ~/.bashrc
$ nvm --version
0.35.2

Node.js バージョン一覧

$ nvm ls-remote
...
v13.6.0

Node.js インストール

$ nvm install --lts
...
Now using node v12.14.1 (npm v6.13.4)
Creating default alias: default -> lts/* (-> v12.14.1)

インストール済みバージョン確認

$ nvm ls
->     v12.14.1
         system
default -> lts/* (-> v12.14.1)
node -> stable (-> v12.14.1) (default)
stable -> 12.14 (-> v12.14.1) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> v12.14.1)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.18.1 (-> N/A)
lts/erbium -> v12.14.1
$ nvm current
v12.14.1
$ node --version
v12.14.1

利用バージョン変更

$ node use [version]
<< Top < Prev Next > Last >>