node-sass を使って sass をコンパイルする

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ファイルが書き出されます。

マルチログインで未認証のリダイレクト
Homebrew で Redis をインストール
CSS だけでスムーズスクロール
EC-CUBE4 で Gmail の smtp を利用する
Amazon Linux 2 の amazon-linux-extras とは
UNIQUE カラムのバリデーションで自分自身を除外して更新
フォーム有効期限切れで Page Expired をリダイレクト
ログを日付でローテーションやクリアや削除
Homebrew で PHP8.0 から PHP7.4 にダウングレード
Big sur で zsh 移行と Homebrew アップグレード
Mac に minikube をインストール
途中から .gitignore に追加する
Larevel 6.x から Laravel 8.x にバージョンアップ
Composer で Allowed memory size (メモリ不足)エラー
Blade でカスタムクラスを利用する
git push git pull にブランチ指定せずに実行する
git pull や git push できなくなったとき
Docker のコンテナからホストOS に接続
Mac で ローカル IP アドレス(ipv4)のみを表示する
ホストOS から Docker の MySQLコンテナに接続
caching_sha2_password のエラー
node-config で環境設定ファイルを利用する
rootパスワードを初期化(再設定)する
Git から clone したときのエラー対処
Mac に MySQL をインストール
Mac に PostgreSQL をインストール
Laravel 環境構築 - Mac ネイティブ編
Firebase 入門 - Firebase とは
Firebase 入門 - CLI インストールとデータベースの設定
AWS 無料枠(t2.micro)で容量とメモリエラー
Cloud9 を起動する -初心者編-
gcloud で GCEインスタンスを起動してみる
AWS CLI と jq でインスタンス一覧を整形して表示
React と Laravel7 のプロジェクトを作成する
Homebrewインストール-2020年版
3直線で囲まれた範囲塗りつぶし
PuLP で線形最適化問題を解く
カスタムのペジネーションを作る
node-sass を使って sass をコンパイルする
Log ファサードでSQLログを分離して書き出す
いちから始める Docker - 複数のコンテナを使う - (2020年)
いちから始める Docker - docker-compose を使う - (2020年)
AWS ECR を使ってみる
Laravel7 でマルチ認証
Mac に AWS Client を設定する
Laravel7 リリース
v-html でHTML表示する
Laravel で Nuxt.js を使ってみる(Docker環境)
Laravel で Vue コンポーネントを使う
いちから始める Docker -コンテナをビルド- (2020年)