Zenn
🛠️

2020/11版：SCSS の開発環境を yarn run で構築する

2020/11/13に公開
Scss
yarn
tech

今回は開発環境ということで cssnano を使った minify などは行わないところまでとします。
また、 git や npm のローカルの準備は既に終わってるものとします。

TL;DR

yarn init -y
yarn add sass --dev
# この後、必要なディレクトリを作成

package.json に以下追記

  "scripts": {
    "scss": "sass src/scss:public/css"
  },

yarn scss

LibSass(node-sass) が非推奨になってた

2020/10/26 の勧告でLibSass(node-sass) が非推奨になってました。
ついに LibSass と DartSass の戦いに終止符が打たれて感慨深い(?)ですね。
というわけで今回の構築にも node-sass ではなく sass を使用します。

LibSass -> npm パッケージ名 node-sass
DartSass -> npm パッケージ名 sass

参考：

何はともあれまず下準備

プロジェクトのディレクトリを作成（私は最初にGitHubにリポジトリを作ってcloneしてきます）して、
トランスパイル前のコードを保存する src ディレクトリ と
トランスパイル後のコードを保存する public ディレクトリ を作成する

git clone git@github.com:<userid>/my_project.git
cd my_project
mkdir src
mkdir src/scss
mkdir public
mkdir public/css

.gitignore を入れておく

GitHub で新規リポジトリ作成時に .gitignore を Node 設定とかで作成してるならそれでOK。
作成し忘れた時とかは gitignore.io とか使って生成した物を入れておきます。

vim .gitignore
# 編集して
git add .
git commit -m ":see_no_evil: add .gitignore"

yarn を初期化して必要なパッケージを入れる

yarn init -y
# もちろんこれでも可 yarn init --yes
yarn add sass --dev

ファイルを2つほど作る

今回は Many-to-many Mode (多対多) のトランスパイルを実施したいので
SCSSファイルを2つほど src/scss に用意します。
ファイル名と中身は適当です。

global.scss

body {
  margin: 0;

  h1,
  p {
  margin: 0;
  }
}

second.scss

b,
strong {
  font-weight: bolder;
}

package.json に scripts を書く

こんな感じですね。

"scripts": {
    "scss": "sass src/scss:public/css"
  },

出来上がった package.json はこんな感じ

  "name": "my_project",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@github.com:<userid>/my_project.git",
  "author": "your name",
  "license": "MIT",
  "scripts": {
    "scss": "sass src/scss:public/css"
  },
  "devDependencies": {
    "sass": "^1.29.0"
  }

yarn run する

yarn run hoge の場合 run は省略できます。

yarn scss

はい、できました。やったぜ。
デフォルト設定で出力しているので source map も出力されてますね。

public/css はバージョン管理に含める必要はないので
.gitignore に足しとくといいでしょう。

今回のプロジェクトファイル一式はこちらです
https://github.com/JUNKI555/yarn_run_practice01

多分出ると思う疑問の回答

なんで npm / npm script じゃないの？

  • yarn が好きだからです
    • 語感がいいですよね、やーん。

なんで gulp / webpack 使わないの？

  • 使わずにイケたからです
  • 今回は Many-to-many の出力にしたかったからです

トランスパイル？ コンパイルじゃないの？

  • Sass(SCSS) は「プログラミング言語を別の言語に変換」なのでトランスパイルが正しいはず。知らんけど。

そのほかの参考サイト

Discussion